/* ═══════════════════════════════════════════════════════════════════════════
   api-suite.css — os átomos de DOCUMENTAÇÃO que a suite não tem.

   A UI nova (app.bundle.css) traz o cabeçalho, o herói, o sumário, as seções e
   o bloco de código. O que não existe lá, porque o exemplo da suite é uma
   amostra e esta página é a referência de verdade, mora aqui: tabelas de
   parâmetros, blocos de endpoint, cartões de modelo, o token de tipo, o selo de
   obrigatório e a numeração de linha do código.

   REGRA: nada de cor crua — tudo sai dos tokens da suite (--ec-*), para os dois
   temas seguirem juntos sem regra dupla. A exceção é a paleta de realce de
   sintaxe, que é semântica (comentário, string, número, palavra-chave) e não
   tem token equivalente; ela vem em duas versões, uma por tema.

   Fica FORA do app.bundle.css de propósito: aquele é gerado da suite por
   scratchpad/bundle-web.py e seria sobrescrito na próxima regeração.
   ═══════════════════════════════════════════════════════════════════════════ */
@layer entelecy.page {

  /* ── Chaves do herói (base URL, autenticação, formatos) ─────────────────── */
  .api-base {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-3);
    margin-top: var(--ec-space-6);
  }

  .api-base__item {
    padding: var(--ec-space-2) var(--ec-space-4);
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius-pill);
    background: var(--ec-surface);
    color: var(--ec-text-muted);
    font: 400 var(--ec-step--1)/1.5 var(--ec-font-mono);
  }

  .api-base__item b {
    margin-right: var(--ec-space-2);
    color: var(--ec-text-faint);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* ── Sumário: subitem e seção visível ───────────────────────────────────────
     A suite marca a seção corrente por [aria-current]; o script desta página
     usa .is-active (ver o comentário dele: aqui o IntersectionObserver não
     dispara de forma confiável). Os dois casam no mesmo estilo. */
  /* ── Sumário fixo, conteúdo passando por baixo ────────────────────────────
     A suite já declara `position: sticky`, mas com
     `top: calc(var(--ec-header-height) + 1.5rem)` — ou seja, reservando 6,25rem
     para o cabeçalho. Só que `.ec-header` é `position: relative`: ele ROLA
     embora. O menu grudava 100px abaixo do topo, num vão morto que parece
     defeito, não menu fixo. Sem cabeçalho fixo não há o que descontar.

     `align-self: start` é cinto e suspensório: o item de grade só desliza se
     não estiver esticado na altura da linha, e depender do `align-items` do
     pai é depender de uma regra que mora noutro arquivo.

     `max-height` + rolagem própria porque o sumário tem quinze itens: numa
     janela baixa os últimos ficavam fora do alcance, sem jeito de chegar neles.

     Escopo em min-width porque abaixo de 62rem a suite transforma o sumário
     numa barra horizontal com `top: 0` — e a camada `page` vence a `components`,
     então sem o limite eu quebraria o mobile. */
  @media (min-width: 62.01rem) {
    .api-toc {
      /* Redeclarado, e não herdado da suite: uma regra que só funciona porque
         outro arquivo declarou metade dela quebra em silêncio no dia em que
         aquele arquivo mudar — e ele é GERADO. */
      position: sticky;
      align-self: start;
      top: var(--ec-space-5);
      max-height: calc(100svh - 2 * var(--ec-space-5));
      overflow-y: auto;
      z-index: 10;
    }
  }

  .api-toc a.is-sub { padding-left: var(--ec-space-5); }

  .api-toc a.is-active,
  .api-toc a[aria-current] {
    color: var(--ec-text);
    border-inline-start-color: var(--ec-accent);
  }

  /* ── Tabelas de parâmetros ──────────────────────────────────────────────── */
  .api-tablewrap {
    margin-top: var(--ec-space-5);
    overflow-x: auto;                    /* tabela larga rola nela, não na página */
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius-lg);
  }

  .api-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ec-step-0);
  }

  .api-table th,
  .api-table td {
    padding: var(--ec-space-3) var(--ec-space-4);
    border-top: 1px solid var(--ec-line);
    text-align: left;
    vertical-align: top;
  }

  .api-table thead th {
    border-top: 0;
    color: var(--ec-text-faint);
    font: 500 var(--ec-step--1)/1.4 var(--ec-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .api-table td:first-child { font-family: var(--ec-font-mono); white-space: nowrap; }
  .api-table td { color: var(--ec-text-muted); }

  /* ── Coluna do nome do campo: quebra quando precisa ───────────────────────
     A suite dá `white-space: nowrap` nesta coluna, e para `model` ou `stream`
     está certo. Mas as tabelas de resposta têm caminho pontilhado —
     `…completion_tokens_details.reasoning_tokens`, 43 caracteres — e nowrap
     obriga a coluna a reservar TODA essa largura. O que sobrava para a
     descrição era o resto, e ela saía cortada.

     `anywhere` e não `break-word`, e a diferença foi medida nas 25 tabelas da
     página: só o `anywhere` reduz a largura MÍNIMA do conteúdo, que é o número
     que a tabela usa para repartir as colunas. Com `break-word` a coluna segura
     a largura do nome inteiro e treze tabelas saem em rolagem horizontal.

     O `anywhere` sozinho, porém, partia nome curto no meio (`usage.prompt_` +
     `tokens`), porque o rótulo de 43 caracteres desequilibrava a repartição. O
     que destravou os dois lados foi encurtar aquele rótulo para `…details.…`;
     com ele fora, a coluna recebe espaço justo e a quebra some. */
  .api-table td:first-child {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Um passo menor que o texto corrido. Tabela é leitura de varredura, não de
     parágrafo, e cada rem economizado aqui volta como coluna de descrição —
     que é onde a informação está. */
  .api-table { font-size: var(--ec-step--1); }

  /* SEM nowrap no código da descrição, e o motivo é medido: eu tinha posto um,
     para `loom-flash` não virar `loom-` + `flash` no fim da linha. Só que código
     que não quebra também não deixa a COLUNA encolher, e o resultado foram 13
     tabelas em rolagem horizontal com a descrição cortada. Um hífen quebrado é
     feio; descrição cortada é doc que não se lê. */
  .api-table td code { overflow-wrap: break-word; }

  /* ── Caminho da tabela de endpoints como link pra seção ──────────────────
     Herda a cor da célula em repouso: sublinhado azul de link em doze linhas
     seguidas vira ruído e faz a tabela parecer um menu, não uma referência.
     O sublinhado só aparece no hover/foco, que é quando a pergunta "isto
     clica?" existe. */
  .api-xref {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--ec-line);
  }

  .api-xref:hover,
  .api-xref:focus-visible {
    color: var(--ec-blue);
    border-bottom-color: currentColor;
  }

  /* ── Tipo e obrigatoriedade dentro das tabelas ──────────────────────────── */
  .api-type {
    color: var(--ec-blue);
    font-family: var(--ec-font-mono);
    font-size: var(--ec-step--1);
  }

  .api-req {
    margin-left: var(--ec-space-2);
    color: var(--ec-copper);
    font-family: var(--ec-font-mono);
    font-size: var(--ec-step--1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* ── Largura da página de referência ──────────────────────────────────────
     A suite entrega 76rem de container e 54rem de coluna de texto — medida de
     LEITURA, certa para uma página de prosa. Esta não é: cada endpoint mostra
     parâmetros e exemplo LADO A LADO, e 54rem partidos ao meio dão 27rem para
     cada, onde nem o `curl` cabe sem quebrar. Então a página alarga, e a prosa
     é que volta à medida de leitura, uma regra abaixo.

     A medida vai no BODY, e não no herói e no layout. Posta só no conteúdo, ela
     alargava a página para 92rem e deixava o cabeçalho e o rodapé em 76rem — o
     conteúdo passava por fora dos dois, que foi exatamente o estouro relatado.
     No body, todo mundo que usa .ec-container cresce junto e as faixas voltam a
     alinhar pela esquerda.

     E 92rem não bastou: medido na página, o painel ficava com 415px úteis para
     um `curl` que pede 703px, e todo exemplo exigia rolagem horizontal para ser
     lido. 100rem dá folga para as duas colunas ao mesmo tempo — é `min()` com a
     janela, então tela menor continua caindo para a largura dela. */
  .page-api { --ec-content: 100rem; }

  /* Menos ar entre sumário e conteúdo: o padrão da suite chega a 6rem, e cada
     rem aqui sai da coluna que precisa caber em duas. */
  .api-layout { gap: clamp(1.5rem, 3vw, 3.5rem); }

  .api-docs { max-width: none; }

  /* ── Medida de leitura para tudo que NÃO é endpoint ───────────────────────
     A largura de 92rem existe por causa de UMA coisa: o bloco de endpoint, que
     é o único desenhado em duas colunas. Todo o resto — parágrafo, tabela,
     bloco de código solto, callout, grade de cartões — continua na régua de
     leitura, alinhado à esquerda.

     A primeira versão desta regra cobria só p/ul/ol, e o resultado foi o que a
     captura mostrou: parágrafo estreito e, logo abaixo, a tabela de Endpoints
     esticada em 73rem com a coluna de descrição quase vazia. Largura sobrando
     não é generosidade, é ruído. */
  .api-section > p,
  .api-section > ul,
  .api-section > ol,
  .api-section > h3,
  .api-section > h4,
  .api-section > .api-code,
  .api-section > .api-tablewrap,
  .api-section > .api-callout,
  .api-section > .api-model-grid,
  .api-section > .api-tabs,
  .api-section > .api-tabgroup > .api-tabs,
  .api-section > .api-tabgroup > .api-pane > h3,
  .api-section > .api-tabgroup > .api-pane > p,
  .api-section > .api-tabgroup > .api-pane > .api-code { max-width: 58rem; }

  /* ── Respiro entre blocos de texto ────────────────────────────────────────
     O reset da suite zera a margem de <p>, e a página espaça bloco a bloco —
     funciona quando cada seção tem um parágrafo só. A Visão geral agora tem
     três seguidos, e eles saíam colados, lidos como um parágrafo único. Espaça
     o que vem DEPOIS de um parágrafo ou de uma lista, e só isso: o primeiro
     filho continua encostando no título, como o resto da suite. */
  .api-docs p + p,
  .api-docs p + ul,
  .api-docs p + ol,
  .api-docs ul + p,
  .api-docs ol + p { margin-top: var(--ec-space-4); }

  /* ── Endpoint: assinatura + corpo ───────────────────────────────────────── */
  .api-endpoint {
    margin-top: var(--ec-space-6);
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius-lg);
    background: var(--ec-surface);
  }

  /* Mesma grade de três colunas da .api-endpoint-list da suite. Em div, e não
     em <a>, porque aqui a assinatura TITULA a seção em que já se está. */
  .api-signature {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    align-items: center;
    gap: var(--ec-space-4);
    padding: var(--ec-space-4) var(--ec-space-5);
    border-bottom: 1px solid var(--ec-line);
    /* O arredondamento vinha do `overflow: hidden` do .api-endpoint. Ele saiu:
       overflow diferente de visible cria um contexto de rolagem e o
       `position: sticky` do painel de código para de grudar dentro dele. Com o
       raio declarado aqui, o canto continua certo e o sticky funciona. */
    border-radius: var(--ec-radius-lg) var(--ec-radius-lg) 0 0;
    background: var(--ec-bg-elevated);
  }

  .api-signature code {
    color: var(--ec-copper);
    font-family: var(--ec-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }

  .api-signature.is-get code { color: var(--ec-green); }

  .api-signature span {
    min-width: 0;
    overflow-x: auto;
    color: var(--ec-text);
    font-family: var(--ec-font-mono);
    font-size: var(--ec-step-0);
    white-space: nowrap;
  }

  .api-signature small { color: var(--ec-text-faint); font-size: var(--ec-step--1); }

  .api-endpoint__body { padding: var(--ec-space-5); }
  .api-endpoint__body > :first-child { margin-top: 0; }

  /* ── Endpoint em duas colunas: referência à esquerda, uso à direita ────────
     `align-items: start` é o que permite o sticky: com o padrão (stretch) a
     coluna direita teria a altura da linha inteira e não sobraria curso para
     ela deslizar. */
  .api-endpoint__body.has-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    align-items: start;
    gap: var(--ec-space-5) var(--ec-space-6);
  }

  /* ── Código do painel: menor e quebrando linha ────────────────────────────
     Menor que o dos blocos soltos da página porque ali a coluna é inteira e
     aqui divide espaço com a referência.

     E QUEBRA em vez de rolar. Rolagem horizontal dentro do painel é o defeito
     que aparecia: para ler o fim de um `curl` era preciso rolar cada bloco, um
     por um. Encurtar os exemplos ajudou, mas não é solução — o próximo exemplo
     longo traz o problema de volta.

     Funciona porque `.ln` já é bloco com `padding-left: 3em` e o número vem de
     um `::before` posicionado absoluto: a continuação da linha alinha sozinha
     na calha, com o número só na primeira. `break-word` e não `anywhere` para
     partir apenas o que não cabe inteiro (base64, URL longa) — palavra comum
     continua quebrando no espaço. */
  .api-endpoint__panel .api-code pre {
    font-size: 0.72rem;
    /* Entrelinha menor que a dos blocos soltos (1.75): aqui a altura é recurso
       escasso, porque painel mais alto que a janela esconde o próprio fim. */
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  /* `.ln` tem altura mínima calculada para a entrelinha padrão; sem acompanhar,
     cada linha continuaria ocupando o espaço antigo e o ganho seria zero. */
  .api-endpoint__panel .api-code .ln { min-height: 1.42em; }

  .api-endpoint__docs { min-width: 0; }
  .api-endpoint__docs > :first-child { margin-top: 0; }

  /* Mesma correção do sumário: o cabeçalho rola embora, então não há altura de
     cabeçalho a descontar aqui.

     SEM teto e SEM rolagem própria. Eu tinha posto os dois porque o painel do
     chat não cabia na janela, e o resultado foi uma barra de rolagem no meio da
     página: a roda do mouse em cima do painel rolava o painel, não a página.
     Rolagem aninhada é pior que o problema que resolvia.

     O que não cabia era conteúdo demais num painel só — o exemplo de imagem
     saiu daqui e voltou para a coluna da esquerda, ao lado do texto que já o
     explica. Painel com requisição e resposta cabe. */
  .api-endpoint__panel {
    position: sticky;
    top: var(--ec-space-5);
    min-width: 0;
  }

  .api-endpoint__panel > :first-child { margin-top: 0; }

  /* Rótulo do painel (Requisição / Resposta) */
  .api-panel__k {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ec-space-3);
    margin-top: var(--ec-space-5);
    margin-bottom: var(--ec-space-2);
    color: var(--ec-text-faint);
    font: 500 var(--ec-step--1)/1.4 var(--ec-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.09em;
  }

  .api-panel__k:first-child { margin-top: 0; }
  .api-panel__status { color: var(--ec-green); text-transform: none; letter-spacing: 0.04em; }

  /* Abas de linguagem dentro do painel: menores que as de exemplo da página,
     porque aqui elas dividem espaço com o código e não titulam uma seção. */
  .api-langs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-2);
    margin-bottom: var(--ec-space-3);
  }

  .api-langs .api-tab { padding: 0.25rem 0.7rem; font-size: 0.72rem; }

  /* Uma coluna quando não há largura para duas. O sticky sai junto: grudado
     numa coluna que ocupa a linha inteira, o painel cobriria o texto.

     O corte é 90rem e não 78rem — a conta, não o gosto: a 78rem sobram cerca de
     32rem para a coluna da esquerda depois do sumário, do painel e das duas
     folgas, e uma tabela de três colunas nessa largura vive em rolagem
     horizontal. Duas colunas espremidas são piores que uma inteira. */
  @media (max-width: 90rem) {
    .api-endpoint__body.has-panel { grid-template-columns: minmax(0, 1fr); }
    .api-endpoint__panel { position: static; }
  }

  /* ── Cartões de modelo ──────────────────────────────────────────────────── */
  .api-card__k {
    color: var(--ec-text-faint);
    font: 500 var(--ec-step--1)/1.4 var(--ec-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.09em;
  }

  .api-card h3 { margin-block: var(--ec-space-2) var(--ec-space-3); }
  .api-card__lbl { margin-top: var(--ec-space-4); color: var(--ec-text-faint); font-size: var(--ec-step--1); }

  .api-card__ids {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-2);
    margin-top: var(--ec-space-2);
  }

  .api-card__ids span {
    padding: 0.2em 0.7em;
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius-pill);
    color: var(--ec-text-muted);
    font: 400 var(--ec-step--1)/1.6 var(--ec-font-mono);
  }

  /* ── Aviso dentro do callout ────────────────────────────────────────────── */
  .api-callout__k {
    display: block;
    margin-bottom: var(--ec-space-2);
    color: var(--ec-text-faint);
    font: 500 var(--ec-step--1)/1.4 var(--ec-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.09em;
  }

  .api-callout.is-warn { border-color: color-mix(in srgb, var(--ec-copper) 45%, transparent); }
  .api-callout.is-warn .api-callout__k { color: var(--ec-copper); }

  /* ── Abas de exemplo ────────────────────────────────────────────────────── */
  .api-tab {
    padding: var(--ec-space-2) var(--ec-space-4);
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius-pill);
    color: var(--ec-text-muted);
    background: transparent;
    font: inherit;
    font-size: var(--ec-step--1);
    cursor: pointer;
  }

  .api-tab.is-active {
    color: var(--ec-accent-ink);
    background: var(--ec-accent);
    border-color: transparent;
  }

  .api-pane[hidden] { display: none; }

  /* ── Numeração de linha e realce de sintaxe ─────────────────────────────────
     O frame do bloco é da suite (--ec-code-*); aqui entram só a calha e as
     cores de token. Uma linha por <span class="ln">: dá a calha do editor sem
     tabela e sem plugin. */
  .api-code code {
    display: block;
    color: var(--ec-code-text);
    counter-reset: ln;
  }

  .api-code .ln {
    display: block;
    position: relative;
    padding-left: 3em;
    min-height: 1.62em;
  }

  .api-code .ln::before {
    counter-increment: ln;
    content: counter(ln);
    position: absolute;
    left: 0;
    width: 2em;
    text-align: right;
    color: var(--ec-code-muted);
    font-variant-numeric: tabular-nums;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Paleta semântica — sem token equivalente na suite, então vem à mão, uma
     versão por tema. Os valores claros são os que a página já usava; os
     escuros são os mesmos matizes puxados para cima até passarem no contraste
     sobre o --ec-code-bg escuro. */
  .api-code .tk-c { color: #8b8578; font-style: italic; }
  .api-code .tk-s { color: #4c6836; }
  .api-code .tk-n { color: #8a5b22; }
  .api-code .tk-k { color: #a93a1c; font-weight: 600; }
  .api-code .tk-p { color: #2c5b6e; }

  :root:not([data-theme="light"]) .api-code .tk-c { color: #7c8796; }
  :root:not([data-theme="light"]) .api-code .tk-s { color: #9ecf7a; }
  :root:not([data-theme="light"]) .api-code .tk-n { color: #e0b070; }
  :root:not([data-theme="light"]) .api-code .tk-k { color: #f39468; }
  :root:not([data-theme="light"]) .api-code .tk-p { color: #7fc3dd; }
}