/* Groups: an in-place board mode, same geometry as the core grid. */
/* min-height: 0 — a flex child's auto minimum is its content height,
   and tall tile art can force the group page taller than the board's
   leftover, inflating cells and labels. It must take exactly #grid's
   share. */
#groupgrid { flex: 1; min-height: 0; display: none; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
body.groups #grid { display: none; }
body.groups #groupgrid { display: grid; }
/* Group cells: same footprint as .cell. Neutral navigation color —
   groups are a map, not vocabulary, so no Fitzgerald role. */
.gcell {
  border-radius: 12px;
  border: 3px solid var(--edge);
  background: var(--press-f);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 700;
  font-size: clamp(11px, 1.9vmin, 17px);
  color: var(--ink-text);
  overflow: hidden;
  padding: 4px;
  text-align: center;
}
.gcell .glyph { font-size: clamp(18px, 3.2vmin, 32px); line-height: 1; }
.gcell .glyph img { width: 70%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.gcell .glyph img.gicon { object-fit: contain; border-radius: 0; }
.gcell .badge {
  font-size: clamp(9px, 1.4vmin, 12px);
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.gcell .glabel { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcell:active { filter: brightness(0.92); }
.gcell.nav { border-color: var(--muted); background: var(--tray); font-size: clamp(13px, 2.2vmin, 20px); }
.gcell.empty { border-style: dashed; border-color: var(--line); background: transparent; }
.gcell.empty:disabled { border-color: transparent; }
/* Edit mode: every movable cell goes dashed; empty slots are drop
   targets and tap-to-add. */
body.editing #groupgrid .gcell:not(.nav):not(.empty),
body.editing #groupgrid .cell { border-style: dashed; }
body.editing #groupgrid .gcell.empty:not(:disabled) { cursor: pointer; }
/* 027 B3: reserved cells are the page's — the home board's own tiles, or
   empty when the top row is off. In Edit mode they read as reserved: not
   dashed like movable words, not drop targets, distinct from an
   available empty cell (Design_System § Groups). */
body.editing #groupgrid .cell.reserved { border-style: solid; opacity: 0.55; cursor: not-allowed; }
#groupgrid .gcell.empty.reserved { border-color: transparent; background: transparent; }
body.editing #groupgrid .gcell.empty.reserved {
  border: 3px solid var(--line);
  background: repeating-linear-gradient(45deg, transparent 0 6px, var(--line) 6px 7px);
  opacity: 0.6;
}
/* 027 B8: a hidden door keeps its slot; in Edit mode it shows faded with
   a Show switch. */
.gcell.door.hidden-door { opacity: 0.45; }
.gcell .hbadge {
  position: absolute; bottom: 4px; right: 4px;
  font-size: 11px; font-weight: 700; padding: 2px 6px;
  border-radius: 999px; border: 2px solid var(--muted); background: #fff; color: var(--ink-text);
}