/* api-hub.css — página-produto da API (/{culture}/api).
   Terminal de teste ao vivo (assinatura), grid do hero, tabela de planos.
   Arquivo isolado (não passa pelo build Tailwind), linkado direto na view. */

/* ── Hero: copy à esquerda, terminal à direita ── */
.ft-api-hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .ft-api-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
    gap: 4rem;
  }
}

/* ── Atmosfera do hero: luz azul de bancada atrás do terminal + grade
      blueprint mascarada. Camada própria (não ::before da section — o
      .ft-rails já usa os pseudo-elementos dela). 100% estática. ── */
.ft-api-hero-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 640px 440px at 76% 40%, rgb(var(--color-primary) / 0.12), transparent 65%),
    radial-gradient(ellipse 520px 380px at 10% 92%, rgb(var(--color-secondary) / 0.06), transparent 70%);
}
.ft-api-hero-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(var(--color-border) / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--color-border) / 0.5) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 78% 88% at 70% 42%, black, transparent 74%);
  mask-image: radial-gradient(ellipse 78% 88% at 70% 42%, black, transparent 74%);
}

/* Acento cromático único do headline — rima com as chaves azuis do JSON. */
.ft-api-h1-accent { color: rgb(var(--color-primary)); }

/* ── Terminal: presença de instrumento (sombra tintada, não neon) e
      TAMANHO FIXO — request e response têm altura travada para o card
      nunca redimensionar quando a resposta real substitui o exemplo,
      quando dá erro ou quando troca de aba. Alturas = nº exato de linhas
      dos exemplos (12px × 1.6 de line-height + 0.875rem × 2 de padding):
      request 3 linhas, response 10 linhas (envelope real de ambos). ── */
[data-api-term] {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 0 0 1px rgb(var(--color-primary) / 0.08),
    0 20px 44px -20px rgb(0 0 0 / 0.6),
    0 36px 90px -42px rgb(var(--color-primary) / 0.28);
}
[data-api-term] .ft-api-term-req {
  height: 5.35rem;
  overflow-y: hidden;
}
[data-api-term] .ft-api-term-res {
  height: 13.75rem;
  overflow-y: auto;
}

.ft-api-free-line {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgb(var(--color-text-muted));
  font-variant-numeric: tabular-nums;
}

/* ── Terminal: estilos compartilhados vivem em app.src.css (.ft-api-term*) —
      a home também renderiza o painel de código com as mesmas classes. ── */

/* ── Card "Referência completa" fecha o grid de grupos ── */
.ft-api-ref-card {
  border-style: dashed;
  border-color: rgb(var(--color-primary) / 0.4);
}
.ft-api-ref-card:hover { border-style: solid; }

/* Ícone do grupo acende junto com o card (mesmo gesto do mega menu). */
.ft-tool-card:hover .ft-mega-icon {
  color: rgb(var(--color-primary));
  border-color: rgb(var(--color-primary) / 0.35);
}

/* ── Fatos do contrato: valores em texto corrido (não truncar) ── */
.ft-api-fact-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  max-width: 28rem;
}
.ft-spec-value code {
  color: rgb(var(--color-primary));
}

/* ── Tabela de planos ── */
.ft-api-plans-table { background: rgb(var(--color-surface)); }
.ft-api-plans-table td, .ft-api-plans-table th { white-space: nowrap; }
.ft-api-plans-table tbody tr { transition: background-color 120ms ease; }
.ft-api-plans-table tbody tr:hover { background: rgb(var(--color-surface-hover)); }

/* Escada de tiers como cor-informação: um dot por plano, tokens da paleta. */
.ft-plan-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  margin-right: 0.625rem;
  vertical-align: 1px;
  background: rgb(var(--color-border));
}
.ft-plan-dot--dev        { background: rgb(var(--color-primary)); }
.ft-plan-dot--pro        { background: rgb(var(--color-secondary)); }
.ft-plan-dot--business   { background: rgb(var(--color-success)); }
.ft-plan-dot--enterprise { background: rgb(var(--color-warning)); }