/* Groups v2 (docs/GROUPS-V2.md): Your groups (#/my-groups) as cards with a kind chip, tags as chips with Add, a
   group's page (#/my-groups/:slug) with members by name, their local time and away chips, and its notices; the kind
   filter and About panel on the leads' #/groups pages. Kind chips by --chip-face: team blue, skill lav, crew coral,
   place green, other grey. Locky Design System tokens only. */
:root { --gp-card-edge: var(--line); --gp-note: var(--sunk); }
:root[data-theme="dark"] { --gp-card-edge: var(--line); --gp-note: var(--sunk); }

.gp-kind-team { --chip-face: var(--face-blue); }
.gp-kind-skill { --chip-face: var(--face-lav); }
.gp-kind-crew { --chip-face: var(--face-coral); }
.gp-kind-place { --chip-face: var(--face-green); }
.gp-kind-other { --chip-face: var(--face-grey); }

.gp-cards { list-style: none; margin: 0; padding: 12px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gp-card {
  display: grid; gap: 6px; align-content: start; padding: 12px; border: 2px solid var(--gp-card-edge); border-radius: var(--radius);
  background: var(--surface); min-width: 0;
}
.gp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gp-card-name { font-weight: 700; overflow-wrap: anywhere; }
.gp-card p { margin: 0; }
.gp-notice-line { font-size: 14px; overflow-wrap: anywhere; }
.gp-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.gp-invites { padding: 0 12px 12px; }
.gp-invite { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.gp-invite:last-child { border-bottom: 0; }
.gp-invite p { margin: 0; }
.gp-note { padding: 6px 10px; border-radius: var(--radius); background: var(--gp-note); white-space: pre-line; overflow-wrap: anywhere; }

.gp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 12px 8px; margin: 0; }
.gp-tag-list { list-style: none; margin: 0; padding: 0 12px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.gp-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.gp-tag-name { font-weight: 600; }

.gp-description { margin: 0 0 10px; white-space: pre-line; overflow-wrap: anywhere; }
.gp-locked { margin: 0 0 10px; }
.gp-members { padding: 0 12px 12px; }
.gp-member { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.gp-member:last-child { border-bottom: 0; }
.gp-member-name { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.gp-member-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.gp-notices { padding: 0 12px 12px; }
.gp-notice { padding: 10px 0; border-bottom: 1px solid var(--line); }
.gp-notice:last-child { border-bottom: 0; }
.gp-notice p { margin: 0; }
.gp-notice-title { font-weight: 700; overflow-wrap: anywhere; }
.gp-notice-body { margin-top: 2px; white-space: pre-line; overflow-wrap: anywhere; }

/* Leads' #/groups: the kind filter, and the About panel on #/group/:slug */
.gp-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.gp-about dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.gp-about dt { color: var(--muted); }
.gp-about dd { margin: 0; overflow-wrap: anywhere; }
.gp-manager-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 560px) {
  .gp-cards { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .gp-tag { width: 100%; }
  .gp-tag .btn { margin-left: auto; }
}

/* Rows the About panel shows or hides by kind (there's no global [hidden] rule). */
.gp-hide[hidden] { display: none; }