/* Documentação Kuberdata: cola sobre o CSS do hub (styles, experience, plano, playground).
   Nenhuma cor nova: tudo sai dos tokens de styles.css. Cada bloco diz para que serve. */

.docs-article>section{scroll-margin-top:110px}
.doc-hero-actions{margin:0 0 46px;gap:12px;flex-wrap:wrap}

/* Guia: três partes de "como funciona", em linha no computador e empilhadas no celular. */
.doc-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:30px 0 0}
.doc-flow>div{border:1px solid var(--border);border-radius:12px;padding:22px;background:var(--surface)}
.doc-flow b{display:block;font-size:17px;margin:8px 0 6px;color:var(--foreground)}
.doc-flow p{font-size:14px;margin:0;color:var(--muted)}

/* Guia: o que dá para fazer, em cartões de duas colunas. */
.doc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:26px 0}
.doc-cards article{border:1px solid var(--border);border-radius:12px;padding:24px}
.doc-cards h3{font-size:19px;margin:10px 0 8px}
.doc-cards p{font-size:14px;margin:0;color:var(--muted)}

/* Guia: passo a passo numerado. */
.doc-steps{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.doc-steps>li>div{min-width:0}
.doc-steps>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;border:1px solid var(--border);border-radius:12px;padding:24px}
.doc-step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--primary);color:var(--primary);font:15px/1 var(--mono)}
.doc-steps h3{font-size:21px;margin:8px 0 10px}
.doc-steps p{font-size:15px}
.doc-steps code{font:12px/1.6 var(--mono);color:var(--primary)}
.doc-steps .code-block{margin:16px 0}
.doc-steps .note{margin:14px 0 0}
.doc-cta{margin-top:56px}

/* Página técnica: grupos de rotas, DELETE na cor de alerta do token e tabela de parâmetros. */
.doc-group{font-size:15px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin:34px 0 12px}
.http-method.delete{color:var(--warning);background:transparent;border:1px solid var(--warning)}
.endpoint>summary{flex-wrap:wrap}
.endpoint-body table{width:100%;font-size:13px}
.endpoint-body .table-scroll{margin:14px 0}
.doc-params td:first-child code{white-space:nowrap}
.doc-cost{font:11px/1.6 var(--mono);color:var(--primary);margin-left:auto;white-space:nowrap}

/* Playground: escolha da rota e o curl equivalente. */
.pg-route{display:grid;gap:6px;max-width:620px}
.pg-route select{font-size:15px}
.pg-fields{grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0 12px}
.pg-fields[hidden]{display:none}
.pg-fields .wide{grid-column:1/-1}
.pg-fields input,.pg-fields select{font-size:14px}
.pg-curl pre{white-space:pre-wrap;overflow-wrap:anywhere}
.pg-quota{font:11px/1.6 var(--mono);color:var(--subtle)}

/* Seletores de ID com busca (amostra.js, createPicker): nome na tela, UUID no pedido. */
.picker{display:flex;flex-direction:column;gap:9px;font-size:13px;min-width:0;align-self:start}
.picker>label code{font:10px/1.4 var(--mono);color:var(--subtle);margin-left:4px}
.picker-box{position:relative}
.picker-box input{padding-right:38px}
.picker-box input:disabled{opacity:.55;cursor:not-allowed}
.picker-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:6px;background:none;color:var(--muted);font-size:18px;line-height:1}
.picker-clear:hover{color:var(--foreground);background:var(--surface)}
.picker-manual{font:13px/1.45 var(--mono)!important}
.picker-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;box-shadow:0 18px 50px #0009;list-style:none;margin:0;padding:4px;max-height:240px;overflow-y:auto;border:1px solid var(--border);border-radius:7px;background:var(--surface);scrollbar-width:thin}
.picker-list [role=option]{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 10px;border-radius:5px;cursor:pointer;color:var(--foreground);font-size:13px;line-height:1.4}
.picker-list [role=option]>span{min-width:0;overflow-wrap:anywhere}
.picker-list [role=option]>small{flex:none;font:10px var(--mono);color:var(--subtle)}
.picker-list [role=option][data-active=true]{background:#59f5c514}
.picker-list [role=option][aria-selected=true]{color:var(--primary)}
.picker-note{padding:8px 10px;font-size:12px;color:var(--muted);line-height:1.5}
.picker-meta,.pg-fields .picker-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;min-height:0}
.picker-meta code{font:10px/1.5 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.picker-link{background:none;border:0;padding:0;color:var(--primary);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.picker-warn{color:var(--warning)}
.doc-origin{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.doc-origin code{font-size:11px}
.doc-origin .text-link{display:inline;font-size:inherit}

@media(max-width:720px){
 .doc-flow,.doc-cards{grid-template-columns:1fr}
 .doc-steps>li{grid-template-columns:1fr;gap:10px;padding:20px}
 .pg-fields{grid-template-columns:1fr 1fr}
 .doc-cost{margin-left:0}
}
@media(max-width:420px){
 .pg-fields{grid-template-columns:1fr}
}