/* Playground do hub: só cola entre componentes que o hub já usa (calculator,
   calc-inputs, endpoint, code-block, note, estimate-card, add-product, badge).
   Nenhum componente novo e nenhuma cor nova: tudo sai dos tokens de styles.css. */

/* Espaço entre os blocos de cada seção, na mesma medida do .note e do .code-block. */
.pg-panel{margin:22px 0}
.pg-actions{margin-top:18px;gap:10px}
.pg-form{display:grid;gap:4px;margin-top:22px;max-width:620px}
.pg-form .assumptions{margin-top:22px}
.pg-form code,.help-text code,.calc-line code{font:11px/1.6 var(--mono);color:var(--primary);overflow-wrap:anywhere}

/* Os campos de filtro e de recarga cabem na coluna da calculadora (a landing usa 4 colunas largas). */
.pg-filters{grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0 12px}
.pg-filters .help-text,.pg-reload .help-text{min-height:0}
.pg-filters input,.pg-filters select{font-size:14px}
.pg-reload{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 24px}
.pg-reload input,.pg-reload select{font-size:18px}
.pg-use{margin-top:10px}
.pg-use .calc-line:first-child{border-top:0;padding-top:0}
.pg-wallet>.button{width:100%;margin-top:12px}
.pg-wallet .cost-row b{font-variant-numeric:tabular-nums}

/* Mensagem de estado: o .notice da página de preços, sem a altura mínima, e com
   a cor de alerta do próprio token quando é erro. */
.pg-status{font-size:13px;color:var(--muted);margin:14px 0 0}
.pg-status:empty{display:none}
.pg-status.is-ok{color:var(--primary)}
.pg-status.is-error{color:var(--warning)}
.note.is-error{border-left-color:var(--warning)}
.note.is-empty{border-left-color:var(--border)}
.pg-warning{border-left-color:var(--warning)}

/* Resposta da API no bloco de código do /docs, sem estourar a largura no celular. */
.pg-result:empty,.pg-questions:empty{display:none}
.pg-result .code-top{gap:12px;flex-wrap:wrap}
.pg-result pre,.pg-key pre{max-height:420px;white-space:pre-wrap;overflow-wrap:anywhere}
.pg-key code{color:var(--primary);font-size:13px}
.pg-card{font:13px/1.6 var(--mono);color:var(--primary);white-space:nowrap}

/* Questão entregue: o .endpoint do /docs, com as alternativas em lista. */
.pg-questions .endpoint>summary>span:last-child{padding-left:0}
.pg-questions .endpoint-body ol{padding-left:22px;font-size:14px;color:var(--muted)}
.pg-questions .endpoint-body li{margin-bottom:8px}
.pg-questions .endpoint-body li.is-correct{color:var(--primary)}
.pg-questions .endpoint-body p{font-size:14px}
.pg-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}

@media(max-width:720px){
 .pg-filters,.pg-reload{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
 .pg-filters,.pg-reload{grid-template-columns:1fr}
 .pg-card{white-space:normal}
}