/* ============================================================================
   gc-list.css: Redes de grupos, lista (/client/group-chains). GC-U1, 01/10/2026.
   Os componentes são do ui-kit (ui-page-head, ui-attn, ui-cards +
   ui-object-card, ui-meter.is-segmented, ui-spark, ui-linkfield, ui-pills,
   ui-select, ui-search, ui-drawer, ui-steps, ui-empty.is-hero, ui-choice,
   ui-qr). Aqui só o que é da PÁGINA: ritmo entre os blocos, o cabeçalho no
   celular, os filtros e o desenho do vazio. Namespace gcl-*.
   Só tokens --ui-*; sem sombra, sem faixa de destaque, sem !important.
   Movimento só em transform/opacity (120 a 350 ms) e some com
   prefers-reduced-motion. Cabe em 360 px sem rolagem lateral.
   ============================================================================ */

.gcl-page { min-width: 0; }

@keyframes gclRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gclFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */
.gcl-top .dsh-breadcrumb { margin: 0 0 var(--ui-space-4); }
.gcl-head { align-items: center; }
.gcl-meta { font-variant-numeric: tabular-nums; }
.gcl-meta > span { white-space: nowrap; }
.gcl-sep { margin: 0 2px; color: var(--ui-muted-2); }
.gcl-actions { justify-content: flex-end; }
.gcl-act svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
/* Motivo visível da ação bloqueada (limite de redes do plano): numa linha
   própria, embaixo das ações, alinhado sob "Criar rede". */
.gcl-limit { flex: 1 1 100%; order: 3; margin: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-muted); text-align: right; }
.gcl-limit .ui-btn-link { height: auto; padding: 0; font-size: inherit; vertical-align: baseline; }

/* ── Ritmo entre os blocos: seção 24, cartão 16 ────────────────────────── */
.gcl-block { margin-bottom: var(--ui-space-6); }
.gcl-region > .gcl-block:last-child { margin-bottom: 0; }
.gcl-cards { margin: 0; }
.gcl-cards > .gcl-item { animation: gclRise var(--ui-dur-4) var(--ui-ease-out) backwards; }
.gcl-cards > .gcl-item:nth-child(2) { animation-delay: 40ms; }
.gcl-cards > .gcl-item:nth-child(3) { animation-delay: 80ms; }
.gcl-cards > .gcl-item:nth-child(n+4) { animation-delay: 120ms; }
.gcl-swap { animation: gclFade var(--ui-dur-2) var(--ui-ease-out); }
.gcl-swap .gcl-item { animation: none; }

/* ── Dispositivo (mesma família da tela de Grupos) e filtros ──────────────── */
.gcl-dev { display: flex; align-items: center; gap: var(--ui-space-3); min-width: 0; margin: 0 0 var(--ui-space-4); }
.gcl-dev-lbl { flex: 0 0 auto; font-size: var(--ui-fs-label); color: var(--ui-muted); }
.gcl-dev .ui-seg { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gcl-dev .ui-seg::-webkit-scrollbar { display: none; }
.gcl-devsel { width: auto; min-width: 240px; max-width: 100%; }
.gcl-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-3); margin-bottom: var(--ui-space-4); }
.gcl-filters > .ui-pills { min-width: 0; }
.gcl-search { width: 240px; }

/* ── Cartão: só o que é da página ──────────────────────────────────────── */
.gcl-card .ui-oc-foot > .gcl-link { min-width: 0; }

/* No cartão, o corpo já separa as peças com 8 px: a legenda cola no mapa (4 px). */
.gcl-card .ui-oc-body > .ui-meter-legend { margin-top: calc(var(--ui-space-1) * -1); }

/* ── 1 rede: o que a rede faz, em 3 passos, fechando a tela com a dica ───── */
.gcl-about { margin-top: var(--ui-space-6); padding-left: var(--ui-space-5); }   /* alinhado à coluna de dentro do cartão */
.gcl-about-steps.ui-steps.is-inline { justify-content: flex-start; color: var(--ui-muted); }
.gcl-tip { display: flex; align-items: center; gap: var(--ui-space-2); margin: var(--ui-space-4) 0 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
.gcl-tip svg { flex: 0 0 auto; width: var(--ui-ic-sm); height: var(--ui-ic-sm); color: var(--ui-muted-2); }

/* ── Desenho do vazio e do "Como funciona": link → grupos enchendo ─────── */
/* O contorno do desenho (centro, largura, respiro) é do .ui-empty-art; aqui só as peças. */
.gcl-art-link.ui-linkfield { flex: 0 1 auto; min-width: 0; max-width: 200px; gap: 6px; padding-right: var(--ui-space-3); }
.gcl-art-link > svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--ui-muted); }
.gcl-art-arrow { display: grid; place-items: center; flex: 0 0 auto; color: var(--ui-muted-2); }
.gcl-art-arrow svg { width: var(--ui-ic-md); height: var(--ui-ic-md); }
.gcl-art-map { flex: 1 0 252px; min-width: 0; }
.gcl-art.is-stacked { flex-direction: column; align-items: stretch; gap: var(--ui-space-3); max-width: none; margin: 0 0 var(--ui-space-6); padding: var(--ui-space-4); border-radius: var(--ui-r-lg); background: var(--ui-fill-1); }
.gcl-art.is-stacked .gcl-art-link.ui-linkfield { max-width: none; background-color: var(--ui-bg-card); }
.gcl-art.is-stacked .gcl-art-arrow { transform: rotate(90deg); }
.gcl-art.is-stacked .gcl-art-map { flex: 0 0 auto; }

/* ── "Como funciona" (gaveta) ───────────────────────────────────────────── */
.gcl-how-steps { margin: 0 0 var(--ui-space-5); }
.gcl-how-note { margin: 0 0 var(--ui-space-5); font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.gcl-how-faq { padding: var(--ui-space-4); border: 1px solid var(--ui-border-subtle); border-radius: var(--ui-r-lg); }
.gcl-how-q { margin: 0 0 var(--ui-space-1); font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.gcl-how-faq p { margin: 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-muted); }

/* QR Code da rede: o código no meio, a dica embaixo. */
.gcl-qr-link { font-family: var(--ui-mono); font-size: var(--ui-fs-label); overflow-wrap: anywhere; }
.gcl-qr-body { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-3); text-align: center; }
.gcl-qr-body .ui-help { margin: 0; }

/* Primeiro uso sem poder criar (plano): motivo visível + "Ver planos". */
.gcl-hero-limit { margin: var(--ui-space-3) 0 0; font-size: var(--ui-fs-label); color: var(--ui-muted); }

/* ── Celular ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .gcl-filters { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .gcl-filters > .ui-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .gcl-filters > .ui-pills::-webkit-scrollbar { display: none; }
    .gcl-filters > .ui-pills > .ui-pill { flex: 0 0 auto; }
    .gcl-search { width: 100%; }
    .gcl-dev { flex-direction: column; align-items: stretch; gap: var(--ui-space-2); }
    .gcl-devsel { min-width: 0; width: 100%; }
    .gcl-foot-extra { display: none; }
}
@media (max-width: 600px) {
    /* 5.5: no celular o cartão largo mostra 2 números (membros e entradas). */
    .gcl-stat-3 { display: none; }
}
@media (max-width: 560px) {
    /* Como Dispositivos 390 (aprovado): ações embaixo da meta, "Criar rede"
       na largura que sobra (44) e "Como funciona" só com o ícone (44x44, com
       rótulo acessível). */
    .gcl-how-btn { flex: 0 0 auto; width: var(--ui-target-touch); height: var(--ui-target-touch); padding: 0; gap: 0; }
    .gcl-how-btn svg { width: var(--ui-ic-md); height: var(--ui-ic-md); }
    .gcl-how-btn .gcl-act-txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .gcl-limit { text-align: left; }
    .gcl-hide-sm { display: none; }
    .gcl-art { flex-direction: column; align-items: stretch; gap: var(--ui-space-3); margin-bottom: var(--ui-space-6); }
    .gcl-art-link.ui-linkfield { max-width: none; }
    /* O link do desenho é uma peça só (ícone + endereço), sem botões: não quebra como o campo com ações. */
    .gcl-art .gcl-art-link.ui-linkfield.is-readonly { flex-wrap: nowrap; padding: 4px var(--ui-space-3); }
    .gcl-art .gcl-art-link.ui-linkfield.is-readonly > .ui-linkfield-url { flex: 1 1 auto; padding: 0; }
    .gcl-art-arrow { transform: rotate(90deg); }
    .gcl-art-map { flex: 0 0 auto; }
    .gcl-about { padding-left: var(--ui-space-4); }
    .gcl-about-steps.ui-steps.is-inline { margin-left: 0; }
    .gcl-tip { align-items: flex-start; }
    .gcl-tip svg { margin-top: 1px; }
}

@media (prefers-reduced-motion: reduce) {
    .gcl-cards > .gcl-item, .gcl-swap { animation: none; }
}