/* =====================================================================================
   Componentes compartidos entre páginas del landing.
   Aquí vive lo que usan DOS o más páginas y no pertenece a ninguna: hoy, la code-card.
   Se carga sólo donde se usa (home y developers), no en las 17 rutas: repartir CSS muerto a
   quince páginas es justo el problema que este archivo viene a resolver.

   Por qué existe (medido, 2026-09-09): la home cargaba `developers.css` entero —171 líneas,
   126 reglas— para usar once clases, todas de la code-card. El resto de esa hoja —el hero
   oscuro, las tabs de documentación, el nav sobre oscuro— no aplica en la home y además la
   ata a los cambios de otra página.

   Cero hex NUEVO: la paleta VS Code Dark+ del resaltado y el tema oscuro del componente son
   los mismos que ya vivían en `developers.css` y siguen en el trinquete de
   `tests/contract/Landing/LandingTokensTest.php`, sólo que contados en este archivo.
   ===================================================================================== */

/* ── M3: code card (tema oscuro propio del componente) ── */
.code-card{
  --code-bg:#0f1729;--code-fg:#e6edf6;--code-dim:#8b98ad;--code-edge:#23304a;--code-tab:#5b86d6;
  background:var(--code-bg);border:1px solid var(--code-edge);border-radius:var(--radius-xl);
  overflow:hidden;box-shadow:var(--shadow-lg);width:100%
}
.code-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--code-edge)}
.code-dots{display:inline-flex;gap:5px;flex:none}
.code-dots i{width:9px;height:9px;border-radius:50%;background:var(--code-edge);display:inline-block}
.code-route{font-family:var(--font-family-mono);font-size:12.5px;color:var(--code-dim);letter-spacing:.01em}

.code-tabbar{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--code-edge);overflow-x:auto;scrollbar-width:thin}
.code-tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--code-dim);font:inherit;font-size:13px;font-weight:600;padding:8px 12px;cursor:pointer;white-space:nowrap;border-radius:6px 6px 0 0;transition:color .12s ease}
.code-tab:hover{color:var(--code-fg)}
.code-tab[aria-selected="true"]{color:var(--code-fg);border-bottom-color:var(--code-tab)}

.code-panel{margin:0;padding:18px 20px;overflow-x:auto}
.code-panel code{font-family:var(--font-family-mono);font-size:12.5px;line-height:1.65;color:var(--code-fg);white-space:pre;display:block}

/* Resaltado de sintaxis — paleta VS Code Dark+ (aplicada por developers.js). */
.code-panel .t-cm{color:#6a9955}            /* comentario   */
.code-panel .t-st{color:#ce9178}            /* string       */
.code-panel .t-nu{color:#b5cea8}            /* número       */
.code-panel .t-kw{color:#569cd6}            /* storage kw   */
.code-panel .t-cf{color:#c586c0}            /* control kw   */
.code-panel .t-bo{color:#569cd6}            /* constante    */
.code-panel .t-ty{color:#4ec9b0}            /* tipo         */
.code-panel .t-fn{color:#dcdcaa}            /* función      */
.code-panel .t-pr{color:#9cdcfe}            /* propiedad    */

.code-result{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--code-edge);background:rgba(255,255,255,.025)}
.cr-status{font-family:var(--font-family-mono);font-size:11.5px;color:var(--code-dim)}
.cr-json{font-family:var(--font-family-mono);font-size:12px;color:var(--code-fg)}
.cr-verdict{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:12px;font-weight:600;color:#34d399}
.cr-verdict .ic{width:15px;height:15px;color:#34d399;stroke-width:2.5}

/* foco visible sobre tabs y panels scrollables (hereda outline global) */
.code-tab:focus-visible,.code-panel:focus-visible{outline:2px solid var(--code-tab);outline-offset:-2px;border-radius:6px}

/* Cambio de pestaña: el panel entrante hace fade (+4 px) en --dur-micro en vez de aparecer en seco.
   Vive aquí y no en `developers.css` porque es del componente, no de la página: al extraer la
   code-card se quedó atrás un momento y la home perdió el fundido —lo destapó la huella de
   `docs/design/bakeoff/landing-transversal/`, no el ojo—. Los keyframes `fadein` viven en
   `home.css`, que todas las páginas cargan. */
.code-card[data-tabs] .code-panel{animation:fadein var(--dur-micro) ease both}
@media(prefers-reduced-motion:reduce){
  .code-card[data-tabs] .code-panel{animation:none!important}
}