/* =====================================================================
   As guildas (etapa 2), por cima do m1l.css: a lista (/guildas, tabela densa em papel liso), o cupom de criar, a ficha (/guildas/:nome:
   a capa do ficha.css, os membros na tabela densa e a gestão nos cupons do conta.css) e a seção Guilda da /minha-conta. Densidade
   Operate: nada de cena nem de raios além da capa. Cor só por token.
   ===================================================================== */

/* ===== o campo de texto longo (descrição e mensagem do pedido), com o mesmo contorno e o mesmo foco dos campos ===== */
.campo textarea{font:inherit;font-size:17px;font-weight:500;line-height:1.45;width:100%;min-height:96px;padding:10px 14px;resize:vertical;
  color:var(--sobre-papel);background:var(--campo);border:3px solid var(--contorno);border-radius:12px;transition:box-shadow .15s ease-out}
.campo textarea::placeholder{color:var(--apagado);opacity:1}
.campo textarea:focus{outline:none;box-shadow:0 0 0 4px var(--realce),0 0 0 7px var(--tinta)}
.campo.com-erro textarea{border-color:var(--erro);box-shadow:inset 4px 0 0 var(--erro)}

/* ===== /guildas: a lista ===== */
.gd-pagina{background:var(--papel);color:var(--sobre-papel);min-height:clamp(560px,78vh,1100px)}
/* a lista tem 5 colunas curtas: o bloco inteiro (título, busca, tabela) fica numa coluna de 980px, com o "Criar guilda" na borda da tabela */
.gd-pagina .secao-in{max-width:980px}
.gd-pagina .titulo-e-linha p{max-width:60ch}
.gd-pagina .aviso,.gd-pagina .feito{max-width:720px}
/* criar: o botão de tinta com o custo de agora ao lado do rótulo */
.gd-criar .gd-custo{font-weight:600;font-stretch:100%;letter-spacing:.01em;text-transform:none;font-size:15px}
.gd-sua{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-weight:800;font-stretch:85%;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase}
.gd-controles{margin-bottom:clamp(20px,2.6vw,28px)}
.gd-busca{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;width:min(100%,440px);margin:0}
.gd-busca-linha{display:flex;gap:10px}
.gd-busca input{flex:1;min-width:0;height:48px;padding:0 18px;font:inherit;font-size:17px;font-weight:600;color:var(--sobre-papel);background:var(--campo);
  border:3px solid var(--contorno);border-radius:999px;transition:box-shadow .15s ease-out}
.gd-busca input::placeholder{color:var(--apagado);opacity:1}
.gd-busca input:focus{outline:none;box-shadow:0 0 0 4px var(--realce),0 0 0 7px var(--tinta)}
.gd-busca .botao svg{width:1.05em;height:1.05em}
.gd-limpar{justify-self:start;padding:6px 2px;min-height:40px}
/* a tabela: a mesma tabela densa do ranking, com o líder numa coluna (embaixo do nome no celular) */
.gd-tab .c-nick small{font-weight:600}
.gd-c-lider{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* no computador, o nome da guilda fica com 40% e o líder com o resto: sem o vão de ~800px entre os dois a 1440 */
@media (min-width:861px){
  .gd-tab th:nth-child(2){width:40%}
  .gd-c-lider{width:auto}
}
.gd-c-lider a{font-weight:700}
.gd-c-num{width:110px;text-align:right!important}
.gd-tab td.gd-c-num{font-weight:800;font-size:18px}
.gd-sem-pos{font-weight:900;color:var(--apagado)}

/* ===== /guildas/criar: o cupom ===== */
.gd-cupom-criar .cupom-topo h1{font-size:clamp(30px,3.2vw,40px)}
.gd-cupom-criar .enviar{white-space:normal;line-height:1.15}
.gd-custo-ficha{margin:0 0 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gd-custo-ficha>div{border:3px solid var(--contorno);border-radius:12px;padding:10px 14px 11px;min-width:0}
.gd-custo-ficha dt{font-weight:800;font-stretch:80%;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--apagado)}
.gd-custo-ficha dd{margin:2px 0 0;display:flex;flex-direction:column}
.gd-custo-ficha b{font-weight:900;font-style:italic;font-stretch:105%;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gd-custo-ficha small{font-size:13.5px;font-weight:600;color:var(--apagado);line-height:1.3}
.gd-custo-ficha .gd-falta{color:var(--erro)}
/* sem ouro: o botão desligado não tem cara de ação (nem o degrau, nem a tinta) e diz quanto falta; não é o `.botao[disabled]` do
   m1l.css, que quer dizer "enviando" */
.gd-cupom-criar .enviar.gd-sem-ouro,.gd-cupom-criar .enviar.gd-sem-ouro:hover,.gd-cupom-criar .enviar.gd-sem-ouro:active{background:transparent;color:var(--apagado);
  border-color:var(--apagado);box-shadow:none;translate:none;cursor:not-allowed;opacity:1}

/* ===== a ficha: a capa (ficha.css), a descrição e a situação de quem vê ===== */
.gd-capa .conta-id h1{font-stretch:75%}
.gd-meta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
/* os números como adesivos da faixa de fatos (m1l.css), em escala menor e só aqui na capa */
.gd-adesivos{list-style:none;margin:0;padding:6px 6px 2px;display:flex;flex-wrap:wrap;gap:14px 16px}
.gd-adesivos .adesivo{font-size:15px;padding:7px 12px 6px;box-shadow:0 0 0 3px var(--branco),0 0 0 5px var(--tinta),0 8px 12px -8px var(--sombra-forte)}
.gd-adesivos .adesivo b{font-size:20px}
.gd-fundada{font-size:15px}
.gd-descricao{margin:0;max-width:60ch;font-size:17px;line-height:1.5;font-weight:500;white-space:pre-line;overflow-wrap:anywhere}
.gd-descricao.gd-sem{font-style:italic}
.gd-capa .aviso,.gd-capa .feito{margin:0;max-width:60ch;text-align:left}
.gd-situacao{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:17px}
.gd-situacao p{margin:0}
.gd-situacao>a:not(.botao){font-weight:800}
.gd-nota{font-size:15px;font-weight:600;max-width:46ch}
.gd-pedir{width:min(100%,520px);margin:4px 0 0;text-align:left}
.gd-pedir h2{margin:0 0 14px;font-size:19px}
.gd-pedir .campo{margin-bottom:6px}

/* os membros: o papel é um rótulo de impressão; o líder ganha o adesivo amarelo */
.gd-papel{width:120px}
.gd-chip{display:inline-block;font-weight:800;font-stretch:85%;font-size:13px;letter-spacing:.07em;text-transform:uppercase;line-height:1;
  padding:6px 10px 5px;border-radius:999px;border:2px solid transparent;white-space:nowrap}
.gd-chip-lider{background:var(--realce);color:var(--tinta);border-color:var(--tinta)}
.gd-chip-oficial{border-color:var(--contorno)}
.gd-chip-membro{color:var(--apagado);padding-left:0;padding-right:0}

/* ===== a gestão (os cupons do conta.css) ===== */
.gd-gestao,.gd-confirmar{scroll-margin-top:calc(var(--topo-h) + 18px)}
.gd-gestao .cupom{min-width:0}
.gd-conta{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 .4em;margin-left:6px;border-radius:999px;vertical-align:.12em;
  background:var(--cabeca-tabela);color:var(--realce);font-size:13px;font-style:italic;font-weight:900;font-stretch:110%;letter-spacing:0}
.gd-confirmar{border-color:var(--tinta)}
.gd-perigo{border-color:var(--erro);background:var(--erro-fundo);outline:none} /* perigo é borda sólida, nunca o tracejado do recorte */
.gd-confirmar .ajuste-texto{font-weight:600}
.gd-digite{max-width:340px;margin:0 0 18px}
.gd-digite .erro{margin-top:4px}
.gd-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gd-lista li{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:2px dashed var(--linha-tabela)}
.gd-lista li:first-child{border-top:0;padding-top:4px}
.gd-quem{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-weight:800;font-size:18px;overflow-wrap:anywhere;min-width:0}
.gd-quem small{font-size:14px;font-weight:600;color:var(--apagado)}
.gd-quem small a{font-weight:700;color:var(--sobre-papel)}
.gd-mensagem{margin:0;padding:10px 14px;border-radius:12px;background:var(--zebra);font-size:15px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.gd-acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* a gestão em duas pilhas independentes (uma coluna abaixo de 860px, pelo .ajustes do conta.css) */
.gd-pilha{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px);min-width:0}
/* papéis: uma linha por membro, o apelido com o papel e um controle só */
.gd-papeis li{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px}
.gd-papeis .gd-quem{flex:1 1 12em;align-items:center;gap:4px 10px}
.gd-papel-form{margin:0 0 0 auto;display:flex;align-items:center;gap:10px;min-width:0}
.gd-papel-form .campo{width:200px}
.gd-papel-form select{height:48px;font-size:16px;padding:0 34px 0 12px}
.gd-papel-form .sel-wrap svg{right:12px}
.gd-papel-form .botao{padding:0 16px}
.gd-expulsar{color:var(--erro);border-color:var(--erro)}
.gd-expulsar:hover{background:color-mix(in srgb,var(--erro) 10%,transparent)}
.gd-acoes form{margin:0}
.gd-acoes .botao,.gd-situacao .botao{white-space:normal;line-height:1.15;min-height:44px;padding:11px 18px}

/* ===== a seção Guilda da /minha-conta ===== */
.gd-sub{margin:20px 0 4px;font-weight:800;font-stretch:85%;font-size:15px;letter-spacing:.07em;text-transform:uppercase}
.gd-sem-guilda{margin-bottom:16px}

/* ===== telas estreitas ===== */
@media (max-width:860px){
  .gd-c-lider{display:none}
  .gd-c-num{width:84px}
  .gd-tab td.gd-c-num{font-size:15.5px}
  .gd-papel{width:92px}
  .gd-chip{font-size:12px;padding:5px 8px 4px}
  .gd-meta{align-items:center}
  .gd-adesivos{justify-content:center}
  .gd-situacao{align-items:center;text-align:center}
  .gd-pedir{align-self:stretch;margin-left:auto;margin-right:auto}
  .gd-capa .aviso,.gd-capa .feito{align-self:stretch}
}
@media (max-width:600px){
  .gd-busca{width:100%}
  .gd-busca .botao{padding:14px 18px}
  .gd-custo-ficha{grid-template-columns:1fr}
  .gd-capa .conta-tazo .tazo{--w:180px}
  /* nesta tabela o nome é o conteúdo: quebra em vez de cortar */
  .gd-tab-membros .c-nick b{max-width:none;white-space:normal;overflow-wrap:anywhere}
  .gd-tab-membros .gd-papel{width:78px}
  .gd-tab-membros .gd-chip{padding:4px 6px 3px;letter-spacing:.04em}
  /* a 390 o select e o Revisar dividem a linha (~310px): o texto mais longo das opções ainda cabe inteiro */
  .gd-papel-form{flex:1 1 100%;margin:0}
  .gd-papel-form .campo{width:auto;flex:1;min-width:0}
  .gd-papel-form .botao{padding:0 14px}
}

@media (max-width:380px){
  .gd-papel-form{flex-wrap:wrap}
  .gd-papel-form .campo{flex-basis:100%}
}

@media (prefers-reduced-motion:reduce){
  .campo textarea,.gd-busca input{transition:none}
}