/* Reading layer. Shared Calebe identity lives in calebe-docs.css. */
body.guide { margin: 0; }
.guide aside { position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; }
.guide .brand { display: flex; align-items: center; text-decoration: none; font-weight: 800; }
.guide .eyebrow { text-transform: uppercase; font-weight: 700; margin-top: 26px; }
.guide .small { margin-bottom: 0; }
.guide .sidefooter { margin-top: auto; }
.guide-back { color: #c0d4f7; font-size: 12px; margin-top: 22px; padding: 8px 0; }
.guide nav a { text-decoration: none; }
.guide nav a:last-child { margin-top: 3px; border-top-color: transparent; border-radius: 9px; }
.guide nav a:last-child::before { content: counter(navigation, decimal-leading-zero); font-size: 10px; }
.guide nav a:last-child[aria-current="location"] { border-radius: 999px; }
.guide main { max-width: 1420px; }
.guide header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.guide header a,.guide-back { text-decoration: none; }
.guide header a[download] { border: 1px solid #ced9ec; }
.guide .breadcrumb { background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 8px 0; font-weight: 400; }
.guide .breadcrumb a { background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0; white-space: normal; }
.breadcrumb span { padding: 0 8px; color: #8291a8; }
.guide-heading { position: relative; padding: 40px 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.guide-heading::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 60px; height: 3px; background: #f29102; }
.guide-heading .badge { display: inline-block; color: #285ec5; font-weight: 700; }
.guide-heading h1 { color: #122b53; font-size: clamp(32px,3.6vw,52px); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; text-wrap: balance; margin: 20px 0 12px; }
.guide-article { min-width: 0; font-size: 16px; color: #485b76; overflow-wrap: anywhere; }
.guide-article h2 { color: #163054; font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -.7px; border-top: 1px solid var(--line); padding-top: 30px; margin: 52px 0 20px; scroll-margin-top: 26px; }
.guide-article h3 { color: #203e6b; font-size: 21px; line-height: 1.35; margin: 32px 0 16px; scroll-margin-top: 26px; }
.guide-article h4 { color: #203e6b; font-size: 17px; margin-top: 26px; }
.guide-article p,.guide-article li { line-height: 1.9; }
.guide-article p { margin: 18px 0; }
.guide-article strong { color: #253d5e; font-weight: 700; }
.guide-article a { text-decoration: underline; }
.guide-article li+li { margin-top: 8px; }
.guide-article ul { padding-left: 24px; }
.guide-article ul li { padding-left: 6px; }
.guide-article li::marker { color: #246bfe; }
.guide-article blockquote { margin: 25px 0; padding: 4px 22px; border-left: 3px solid #739dff; border-radius: 0 12px 12px 0; background: #eaf1ff; color: #3a5275; }
.guide-article pre { margin: 0; overflow: auto; tab-size: 2; }
.guide-article pre code { display: block; background: none; padding: 0; font-family: "SFMono-Regular",Consolas,monospace; font-size: 13px; line-height: 1.85; }
.guide-article .codebar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ffffff12; text-transform: uppercase; }
.guide-article .codebox { overflow: hidden; border: 1px solid #243858; }
.guide-article button { font-family: inherit; cursor: pointer; }
.guide-article .copy { min-width: 82px; }
.guide-article .table-scroll { overflow: auto; margin: 24px 0; border: 1px solid var(--line); border-radius: 14px; scrollbar-width: thin; }
.guide-article table { width: 100%; background: white; min-width: 600px; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.guide-article th { text-align: left; }
.guide-article th,.guide-article td { vertical-align: top; border-bottom: 1px solid #e4eaf3; }
.guide-article td:first-child { width: auto; }
.guide-article hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.guide footer { margin-top: 54px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; border-top: 1px solid var(--line); }
@media (max-width:760px) {
  .guide aside { position: sticky; display: grid; }
  .guide-back { display: none; }
  .guide nav { grid-template-columns: 1fr; max-height: 55svh; overflow-y: auto; }
  .guide nav a { font-size: 13px; }
  .guide-heading { padding-top: 28px; padding-bottom: 22px; }
  .guide-heading h1 { font-size: 34px; }
  .guide-article { font-size: 15px; }
  .guide-article h2,.guide-article h3 { scroll-margin-top: 110px; }
  .guide-article h2 { font-size: 25px; }
  .guide-article pre { padding: 18px; }
  .guide-article table { table-layout: auto; }
  .guide-article td:first-child { width: auto; }
}
@media print {
  .guide aside,.guide header,.guide footer,.guide .copy { display: none; }
  .guide main { margin: 0; max-width: none; padding: 0; }
  .guide .table-scroll { overflow: visible; }
  .guide table { min-width: 0; }
  .guide pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
}
/* Um código numa célula não quebra no meio (boleto:wr|ite): a coluna fica no mínimo da largura dele, e a tabela rola no celular. */
.guide-article td code { overflow-wrap: normal; }