/* GROWLMASTER V2'S LOBBY: its layout and what its states show (docs/growlmaster-screen-states.md rule 2), on #gm2's
   data-screen-state and data-window-state. Every value a token (tokens.css); every part the kit's (ui.css), which shows
   itself by the state (a tab, the window, a busy button, a field's error). */

/* the page beside the tab bar: under it on a phone, beside its sidebar on a wide screen */
.gm2-main { padding-bottom: calc(var(--g-tabbar) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .gm2-main { padding-bottom: 0; padding-inline-start: var(--g-rail); } }

/* ONE TAB'S PAGE AT A TIME */
.gm2-pane { display: none; }
.gm2:is([data-screen-state="lobby_tab_tables"],[data-screen-state^="create_table_"],[data-screen-state="leaving_to_new_table"],[data-screen-state^="join_table_"],[data-screen-state="leaving_to_joined_table"]) [data-v2-pane="lobby_tab_tables"],
.gm2[data-screen-state="lobby_tab_growls"] [data-v2-pane="lobby_tab_growls"],
.gm2[data-screen-state="lobby_tab_create"] [data-v2-pane="lobby_tab_create"],
.gm2:is([data-screen-state="lobby_tab_profile"],[data-screen-state="log_out_button_busy"]) [data-v2-pane="lobby_tab_profile"],
.gm2[data-screen-state="someone_else_profile_open"] [data-v2-pane="someone_else_profile_open"] { display: block; animation: gm2-in var(--g-mid) var(--g-ease); }
@keyframes gm2-in { from { opacity: 0; } }

/* a page's column: content first, the one width, room between its parts */
.gm2-col { max-width: var(--g-column); margin: 0 auto; padding: var(--g-4) var(--g-margin) var(--g-7); display: flex; flex-direction: column; gap: var(--g-5); }
.gm2-logo { height: var(--g-logo-bar); width: auto; display: block; margin-inline-start: var(--g-2); }
@media (min-width: 900px) { .gm2-col { padding-top: var(--g-7); } }

/* Tables: the welcome on the picture, Create, my tables */
/* the picture coast to coast and narrow, the welcome on one line under it (Maayan, 2026-11-03) */
.gm2-herobox { margin-inline: calc(-1 * var(--g-margin)); }
.gm2-herobox > .g-card { border-radius: 0; background: none; }
.gm2-herobox .g-card__body { text-align: center; }   /* the welcome: no ground behind it, centred */
@media (min-width: 900px) {   /* a wide screen: the picture in the column, its corners rounded */
  .gm2-herobox { margin-inline: 0; }
  .gm2-herobox .gm2-hero { border-radius: var(--g-r); corner-shape: squircle; }
}
.gm2-hero { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.gm2-welcome { font-size: var(--g-t-title); text-wrap: balance; }
/* the row over the picture (logo, language, Log in): part of the column, at every width */
#gm2TablesTop { position: static; background: none; box-shadow: none; padding-inline: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }   /* no blur: it would hold the language list (fixed) inside it, behind the page */
/* Create and Join side by side, at every width */
.gm2-ctas { display: flex; gap: var(--g-3); }
.gm2-ctas > .g-btn { flex: 1; min-width: 0; height: auto; padding-block: var(--g-2); }
.gm2-ctas .g-btn__t { white-space: normal; text-align: center; }
.gm2-ctas .g-btn__i svg { width: var(--g-icon-lg); height: var(--g-icon-lg); }   /* their icons large (Maayan, 2026-11-03) */
.gm2-section { display: flex; flex-direction: column; margin-top: var(--g-2); }

/* Profile: their face, their name, then what they can do (a phone: its buttons the column's width) */
.gm2-me { align-items: center; text-align: center; padding-top: var(--g-6); gap: var(--g-4); }
.gm2-me__btns { align-self: stretch; display: flex; flex-direction: column; gap: var(--g-3); margin-top: var(--g-2); }
@media (min-width: 900px) { .gm2-me__btns { align-self: center; flex-direction: row; } }
.gm2-me__list { align-self: stretch; text-align: start; margin-top: var(--g-2); }
.gm2-me > .g-btn { align-self: stretch; }

/* Create a new table: its form; Try again in place of Create once it failed */
.gm2-create { display: flex; flex-direction: column; gap: var(--g-4); }
#gm2CreateRetry { display: none; }
.gm2[data-screen-state="create_table_failed_try_again"] #gm2CreateRetry { display: flex; }
.gm2[data-screen-state="create_table_failed_try_again"] #gm2CreateGo { display: none; }

/* going into the new table: the screen goes black (lobby.js goes at the end of its fade) */
.gm2-black { position: fixed; inset: 0; z-index: 100; background: var(--g-black); opacity: 0; pointer-events: none; transition: opacity var(--g-slow) var(--g-ease); }
.gm2:is([data-screen-state="leaving_to_new_table"],[data-screen-state="leaving_to_joined_table"]) .gm2-black { opacity: 1; pointer-events: auto; }
/* A TABLE'S ROW (Maayan, 2026-11-03): its name, whole (never cut short), and Enter on one line; who sits there under them */
.g-row[data-table] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--g-3); row-gap: var(--g-1); align-items: center; padding-block: var(--g-3); }
.g-row[data-table] > .g-row__body { display: contents; }
.g-row[data-table] .g-row__title { grid-column: 1; grid-row: 1; white-space: normal; overflow-wrap: anywhere; }
.g-row[data-table] > .g-row__act { grid-column: 2; grid-row: 1; }
.gm2-tdetails { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-1) var(--g-3); }