/* /ideias — ideias da comunidade. Em cima dos componentes do site (tabbar, chips, segmented, gu-pedido, form-card,
   field, data-table, callout); aqui só o que é da aba: a coluna de voto, a barra até a pauta e os passos do envio. */
/* A aba esconde etapas, botões e avisos com o atributo hidden, e regras de display do site (o grid da etapa, o
   inline-flex de .gu-acoes .secondary) vencem o hidden do navegador. Dentro da aba, hidden vale sempre. */
.ide [hidden] { display: none !important; }
.ide-intro { max-width: 720px; margin-top: 4px; color: var(--muted); font-size: 13px; }
.ide-intro b { color: var(--yellow); }
/* As três regras da aba numa linha, abaixo do texto de abertura: informação, não filtro. */
.ide-regras { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ide-regras:empty { display: none; }
.ide-regras span { border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; background: var(--surface); color: #c7cad0; font-size: 12px; }
.ide-regras b { margin-right: 4px; color: var(--yellow); font-variant-numeric: tabular-nums; }

.ide-abas { overflow-x: auto; }
.ide-abas button { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 15px; white-space: nowrap; }
.ide-abas button:focus-visible, .ide-voto:focus-visible, .ide-link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.ide-barra .gu-chips { margin: 0; }
.ide-filtro { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ide-filtro .group-label { margin-left: 0 !important; }
.ide-barra .ide-ordem { margin-left: auto; }
.ide-ordem button { cursor: pointer; }
.ide-hist-intro { max-width: 880px; margin: 12px 0 4px; font-size: 12px; }
.ide-semcomentario { margin-top: 16px; }
.ide-pauta-intro { margin: 0 0 12px; font-size: 12px; }
.ide-pauta-intro b { color: var(--yellow); }
.ide-link { border: 0; padding: 0; background: none; color: var(--cyan); font: inherit; font-weight: 700; cursor: pointer; }
.ide-link:hover { text-decoration: underline; }

.ide-convite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; border-left-color: #5865f2; }
.ide-convite .gu-discord { flex: none; }
.ide-ok { margin: 0 0 12px; border-left-color: var(--green); }
.ide-aviso:empty, .ide-retorno:empty { display: none; }

/* Um cartão: voto à esquerda, ideia à direita. A cor da borda é a situação, como nos pedidos de guia. */
.ide-ideia { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
.ide-em_votacao { border-left-color: #6b717c; }
.ide-em_pauta { border-left-color: var(--yellow); }
.ide-aprovada { border-left-color: var(--green); }
.ide-implementada { border-color: rgba(244, 175, 37, .45); border-left-color: var(--yellow); background: linear-gradient(180deg, rgba(244, 175, 37, .07), var(--surface) 70%); }
.ide-recusada { border-left-color: #ff6675; }
.ide-minha { background: #191b20; }
.ide-votos { display: grid; align-content: start; justify-items: center; gap: 5px; }
.ide-voto { display: grid; place-items: center; width: 40px; height: 34px; border: 1px solid #3a3f49; border-radius: 6px; background: #22262e; color: var(--muted); cursor: pointer; }
.ide-voto svg { width: 16px; height: 16px; }
.ide-voto:hover:not(:disabled) { color: var(--text); border-color: #4a5160; }
.ide-voto:disabled { opacity: .4; cursor: not-allowed; }
.ide-voto-favor[aria-pressed="true"] { border-color: var(--green); background: rgba(34, 214, 86, .12); color: var(--green); }
.ide-voto-contra[aria-pressed="true"] { border-color: #ff6675; background: rgba(255, 102, 117, .12); color: #ff6675; }
.ide-saldo { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.ide-pos { color: var(--green); }
.ide-neg { color: #ff6675; }
.ide-placar { color: var(--subtle); font-size: 10px; line-height: 1.3; text-align: center; font-variant-numeric: tabular-nums; }
.ide-conteudo { min-width: 0; }
.ide-titulo { margin: 8px 0 4px; color: #fff; font-size: 15px; line-height: 1.3; }
.ide-estrela { color: var(--yellow); }
.ide-resumo { color: #c7cad0; font-size: 13px; line-height: 1.5; }
.ide-ideia .gu-pedido-meta small { color: var(--subtle); }

.ide-area-pvp { background: rgba(255, 138, 92, .16); color: #ff9b73; }
.ide-area-pve { background: rgba(48, 217, 211, .14); color: var(--cyan); }
.ide-status-em_pauta { background: rgba(244, 175, 37, .18); color: var(--yellow); }
.ide-status-aprovada { background: rgba(34, 214, 86, .15); color: var(--green); }
.ide-status-implementada { background: var(--yellow); color: #262008; }
.ide-status-recusada { background: rgba(255, 55, 110, .18); color: #ff6675; }
.ide-sua { box-shadow: inset 0 0 0 1px rgba(244, 175, 37, .5); background: transparent; color: var(--yellow); }
.ide-eco { background: rgba(102, 114, 237, .2); color: #9aa3f7; }

.ide-progresso { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--subtle); font-size: 11px; }
.ide-meta { flex: 1 1 120px; max-width: 220px; height: 6px; border-radius: 99px; background: #262a33; overflow: hidden; }
.ide-meta i { display: block; height: 100%; border-radius: 99px; background: var(--yellow); }
.ide-pronta { color: var(--yellow); font-weight: 700; }
.gu-pedido-rodape .ide-dar-estrela { border-color: rgba(244, 175, 37, .55); color: var(--yellow); }
.ide-copiar-link { display: inline-flex; align-items: center; gap: 5px; }
.ide-copiar-link svg { width: 13px; height: 13px; flex: none; }

/* A ideia que chegou por link fica no topo da aba dela, marcada, até a pessoa ver as outras. */
.ide-destaque:empty { display: none; }
.ide-destaque { margin: 0 0 18px; }
.ide-destaque-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ide-destaque-topo .group-label { margin: 0 !important; color: var(--yellow); }
.ide-destaque .ide-ideia { box-shadow: 0 0 0 1px rgba(244, 175, 37, .55); }
.ide-decisao { margin-top: 4px; }
.ide-decisao small { display: block; margin-top: 4px; color: var(--subtle); }
.ide-decisao-aprovada { border-left-color: var(--green); }
.ide-decisao-implementada { border-left-color: var(--yellow); }

/* Aprovadas: as seções "No jogo" e "A caminho do jogo". */
.ide-h2 { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 10px; }
.ide-h2 small { color: var(--subtle); font-size: 12px; font-weight: 600; }
/* Nick e Discord juntos no cartão. */
.ide-discord { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; color: #858b95; }
.ide-discord .gu-avatar { width: 18px; height: 18px; }
.ide-discord b { color: #c7cad0; }
.ide-copiar { font-size: 11px; }
.ide-decisao-recusada { border-left-color: #ff6675; }

.ide-detalhes { margin: 10px 0 0; border-top: 1px dashed var(--line); padding-top: 10px; }
.ide-detalhes dt { color: #858b95; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ide-detalhes dd { margin: 2px 0 10px; color: #c7cad0; font-size: 13px; line-height: 1.55; white-space: pre-line; }
.ide-retorno { margin-top: 8px; }
.ide-retorno .callout { margin-top: 0; }
.ide-decidir { max-width: 640px; }

/* Enviar ideia: passos numerados e um form-card por etapa. */
.ide-passos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 12px; padding: 0; list-style: none; color: #858b95; font-size: 12px; font-weight: 700; }
.ide-passos li { display: inline-flex; align-items: center; gap: 8px; }
.ide-passos i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-3); font-style: normal; font-size: 11px; }
.ide-passos .ide-passo-ativo { color: var(--text); }
.ide-passos .ide-passo-ativo i { border-color: var(--yellow); background: var(--yellow); color: #262008; }
.ide-passos .ide-passo-feito i { border-color: var(--green); color: var(--green); }
.ide-passo { max-width: 880px; display: grid; gap: 14px; }
.ide .primary:disabled { opacity: .45; cursor: not-allowed; }
.ide-passo h2 { margin: 0; }
.ide-passo > .note { margin: -8px 0 0; font-size: 12px; }
.ide-passo .gu-acoes { margin-top: 0; }
.ide-passo .field label small { color: #737984; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ide-resto { display: grid; gap: 14px; margin: 0; border: 0; padding: 0; min-width: 0; }
.ide-resto:disabled { opacity: .45; }
.ide-rotulo { margin-bottom: 6px; color: #c7cad0; font-size: 13px; font-weight: 600; }
.ide-q .note { margin: -2px 0 8px; }
.ide-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ide-opcao { cursor: pointer; }
.ide-opcao input { margin: 0; accent-color: var(--blue); }
.ide-opcao:has(input:checked) { border-color: #6973ed; color: #fff; }
.ide-check { display: flex; align-items: flex-start; gap: 9px; color: #c7cad0; font-size: 13px; line-height: 1.45; cursor: pointer; }
.ide-check input { margin: 3px 0 0; accent-color: var(--yellow); flex: none; }
.ide-texto { display: grid; }
.ide-form textarea, .ide-decidir textarea { width: 100%; min-height: 96px; border: 1px solid #373c46; border-radius: 5px; padding: 10px; background: #222630; color: #ebeef0; font: 13px/1.5 Inter, system-ui, sans-serif; resize: vertical; }
.ide-form textarea:focus, .ide-decidir textarea:focus { outline: none; border-color: #7984f4; box-shadow: 0 0 0 2px rgba(121, 132, 244, .25); }
.ide-conta { justify-self: end; margin-top: 4px; color: var(--subtle); font-size: 11px; font-variant-numeric: tabular-nums; }
.ide-revisao { display: grid; gap: 8px; margin: 0; font-size: 13px; }
.ide-revisao div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; }
.ide-revisao dt { color: #858b95; }
.ide-revisao dd { margin: 0; color: #e3e5e8; white-space: pre-line; }

/* A blacklist na primeira etapa: uma caixa por item, e só todas marcadas destravam o resto. */
.ide-bl { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: #171a20; }
.ide-bl h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.ide-bl h3 small { color: var(--subtle); font-size: 11px; font-weight: 500; }
.ide-bl-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.ide-bl-ler { display: grid; gap: 1px; border-left: 2px solid #ff6675; padding-left: 10px; color: #e3e5e8; font-size: 13px; }
.ide-bl-ler span { color: var(--muted); font-size: 12px; }
.ide-bl-item { height: 100%; border: 1px solid var(--line); border-left: 2px solid #ff6675; border-radius: 6px; padding: 8px 10px; background: #1b1e25; }
.ide-bl-item b { display: block; color: #e3e5e8; }
.ide-bl-item small { display: block; color: var(--muted); font-size: 12px; }
.ide-bl-item:has(input:checked) { border-color: rgba(34, 214, 86, .55); border-left-color: var(--green); background: rgba(34, 214, 86, .06); }
.ide-bl-conta { margin: 0 0 4px; color: var(--yellow); font-size: 12px; font-weight: 600; }
.ide-bl-conta.ide-bl-completa { color: var(--green); }

/* Painéis dos admins: tabelas do site e o formulário logo abaixo. */
.ide-tabela { min-width: 720px; }
.ide-tabela td { white-space: normal; }
.ide-tabela select { max-width: 140px; }
.ide-acoes { white-space: nowrap; }
.ide-acoes .secondary { margin: 0 6px 0 0; cursor: pointer; }
.ide-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ide-sem-nome { color: var(--subtle); font-weight: 500; }
.ide-voce { color: var(--subtle); }
.ide-form-admin { max-width: 880px; margin-top: 16px; }
.ide-form-admin .note { margin: 4px 0 10px; }
.ide-grade-3 { grid-template-columns: 1.3fr 1fr .7fr; }
.ide-papeis { margin: 12px 0 14px; max-width: 880px; }
.ide-papeis ul { margin: 6px 0; padding-left: 18px; }
.ide-acao-avaliou_ideia { background: rgba(34, 214, 86, .15); color: var(--green); }
.ide-acao-recusou_ideia, .ide-acao-apagou_ideia { background: rgba(255, 55, 110, .18); color: #ff6675; }
.ide-acao-reabriu_ideia { background: rgba(102, 114, 237, .2); color: #9aa3f7; }

@media (max-width: 580px) {
  .ide-ideia { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .ide-voto { width: 36px; height: 32px; }
  .ide-barra .ide-ordem { margin-left: 0; }
  .ide-revisao div { grid-template-columns: 1fr; gap: 2px; }
  .ide-grade-3 { grid-template-columns: 1fr; }
  .ide-convite .gu-discord { width: 100%; justify-content: center; }
}

/* Imagens da ideia: miniaturas com × no envio, faixa na revisão e galeria no cartão (cada uma abre em tamanho cheio). */
.ide-anexos-campo .ide-rotulo { display: block; }
.ide-anexos-campo .ide-rotulo small { color: var(--subtle); font-weight: 500; }
.ide-anexos-campo .note { margin: 0 0 8px; }
.ide-anexos { display: flex; flex-wrap: wrap; gap: 8px; }
.ide-anexos:empty { display: none; }
.ide-anexo { position: relative; width: 104px; height: 78px; margin: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface-3); }
.ide-anexo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ide-anexo-tirar { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(14, 16, 21, .85); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.ide-anexo-tirar:hover, .ide-anexo-tirar:focus-visible { background: #ff6675; outline: none; }
.ide-anexar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.ide-anexos + .ide-anexar { margin-top: 10px; }
.ide-anexos-revisao img { width: 72px; height: 54px; border: 1px solid var(--line); border-radius: 4px; object-fit: cover; }
.ide-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; gap: 10px; margin-top: 4px; white-space: normal; }
.ide-foto .gu-confirmar .primary, .ide-foto .gu-confirmar .secondary { padding: 4px 10px; }
/* Com 1.000 caracteres, o "Como funcionaria?" nasce mais alto que os outros campos. */
#ide-como { min-height: 168px; }
.ide-foto { display: grid; align-content: start; gap: 4px; margin: 0; }
.ide-foto a { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface-3); }
.ide-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.ide-foto a:hover img { transform: scale(1.03); }
.ide-foto a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.ide-tirar-foto { justify-self: start; color: #ff8a95; font-size: 12px; }
@media (max-width: 560px) {
  .ide-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ide-anexo { width: calc(50% - 4px); height: auto; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .ide-foto img { transition: none; } }