/* ==========================================================================
   geth · docs.css
   Layout e prosa de docs.geth.app, por cima dos tokens de cdn.geth.app/v1/main.css
   (que a página importa antes). Só o que é específico de documentação vive aqui:
   casca (topbar + sidebar + artigo), prosa, código, tabelas, callouts.
   ========================================================================== */

/* ---- casca ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.topbar-row { display: flex; align-items: center; gap: 14px; height: 58px; }
.topbar .logo { font-size: 20px; }
.topbar .doc-mark {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 10px;
}
.topbar-links { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.topbar-links a { font-size: 14px; color: var(--muted); padding: 8px 12px; border-radius: 8px; }
.topbar-links a:hover { color: var(--ink); background: var(--hairline-soft); }
.topbar-links a.cta { color: var(--ink); border: 1px solid var(--border); }
.topbar-links a.cta:hover { border-color: var(--ink); background: none; }

.docs-shell {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px; align-items: start;
  padding-top: 36px; padding-bottom: 96px;
}

/* ---- sidebar ----------------------------------------------------------- */
.sidenav { position: sticky; top: 94px; }
.sidenav .eyebrow { margin: 26px 0 10px; }
.sidenav .eyebrow:first-child { margin-top: 4px; }
.sidenav a {
  display: block; font-size: 14px; color: var(--muted);
  padding: 6px 10px; margin-left: -10px; border-radius: 7px; line-height: 1.4;
}
.sidenav a:hover { color: var(--ink); background: var(--hairline-soft); }
.sidenav a.active { color: var(--ink); font-weight: 550; background: var(--green-tint); }

/* ---- artigo ------------------------------------------------------------ */
.article { max-width: 720px; }
.article .crumb { margin-bottom: 14px; }
.article h1 { margin: 0 0 14px; font-size: 34px; font-weight: 650; letter-spacing: -.03em; line-height: 1.12; }
.article .lead { margin: 0 0 34px; }
.article h2 {
  margin: 44px 0 12px; padding-top: 28px; border-top: 1px solid var(--hairline-soft);
  font-size: 21px; font-weight: 650; letter-spacing: -.02em;
}
.article h3 { margin: 28px 0 8px; font-size: 16px; font-weight: 600; }
.article p, .article li { font-size: 15px; line-height: 1.7; color: #3a3e45; }
.article li { margin-bottom: 6px; }
.article a { color: var(--green); }
.article a:hover { text-decoration: underline; }
.article strong { color: var(--ink); }
.article hr { border: 0; border-top: 1px solid var(--hairline-soft); margin: 36px 0; }

/* código inline e bloco */
.article code {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--hairline-soft); border-radius: 5px; padding: 1.5px 5px;
}
.article pre {
  background: #171b22; color: #e8eaee; border-radius: 10px;
  padding: 15px 17px; margin: 14px 0 22px;
  font-size: 12.5px; line-height: 1.65; overflow-x: auto;
}
.article pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.article pre .c { color: #6b7480; }            /* comentário */
.article pre .k { color: #3ddc84; }            /* verbo/chave */
.article pre .s { color: #a5d6ff; }            /* string/valor */
/* título de um bloco de código (a a linha "Request"/"Response" acima do pre) */
.code-caption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin: 18px 0 -8px;
}

/* método + rota, estilo reference */
.endpoint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 13.5px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 11px 14px; margin: 14px 0;
}
.method {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  border-radius: 6px; padding: 3px 8px;
}
.method-get  { color: var(--green); background: var(--green-tint); }
.method-post { color: var(--bg); background: var(--ink); }

/* tabelas */
.article table { width: 100%; border-collapse: collapse; margin: 14px 0 24px; font-size: 14px; }
.article th {
  text-align: left; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  font-weight: 500; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--hairline);
}
.article td {
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline-soft);
  line-height: 1.55; color: #3a3e45; vertical-align: top;
}
.article td code { white-space: nowrap; }

/* callouts */
.callout {
  border: 1px solid var(--hairline); border-left: 3px solid var(--green);
  border-radius: 0 10px 10px 0; background: var(--surface);
  padding: 14px 18px; margin: 20px 0; font-size: 14.5px; line-height: 1.65;
}
.callout.warn { border-left-color: var(--alert); }
.callout p { margin: 0; }

/* próximo passo no rodapé do artigo */
.next {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--hairline);
  font-size: 14.5px;
}
.next a { color: var(--ink); font-weight: 550; }
.next a:hover { color: var(--green); text-decoration: none; }
.next .dir { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }

/* ---- reference (página do Scalar) -------------------------------------- */
.reference-page { padding: 0; }
#scalar-reference { min-height: calc(100vh - 58px); }

/* ---- responsivo --------------------------------------------------------- */
@media (max-width: 900px) {
  .docs-shell { grid-template-columns: 1fr; gap: 8px; padding-top: 20px; }
  .sidenav { position: static; border-bottom: 1px solid var(--hairline); padding-bottom: 18px; margin-bottom: 22px; }
  .topbar-links a.hide-sm { display: none; }
  .article h1 { font-size: 28px; }
}