/* api.znsi.ai layouts. Components and tokens come from /brand/. */

/* ---------- Landing ---------- */
.api-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--space-9);
  border-bottom: 1px solid var(--rule);
}
.api-hero__wafer {
  position: absolute;
  z-index: -1;
  width: min(900px, 120vw);
  aspect-ratio: 1;
  left: -22%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.35;
}
.api-hero__wafer img, .api-hero__wafer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.api-hero__wafer canvas { opacity: 0; transition: opacity 1.2s var(--ease); }
.api-hero__wafer canvas.is-live { opacity: 1; }
.api-hero__wafer:has(canvas.is-live) img { opacity: 0; }
.api-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 20% 50%, transparent 20%, var(--ink) 75%);
  pointer-events: none;
}
.api-hero__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 1000px) { .api-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.api-hero__code { box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(229 52 29 / 0.15); }

/* ---------- Docs ---------- */
/* minmax(0, 1fr): wide code blocks and tables scroll inside their own boxes
   instead of stretching the column past the screen. */
.docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-7) var(--space-9); }
@media (min-width: 1000px) {
  .docs { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-8); }
  .docs__aside { position: sticky; top: calc(var(--header-h) + var(--space-5)); align-self: start; }
  .docs-nav > summary { display: none; }
}
.docs__content, .docs__content.prose { max-width: 56rem; }
.docs__content .table code { white-space: nowrap; }
.docs__content h1 { font-size: var(--step-4); margin-top: var(--space-3); }
.docs__content .code { margin-block: 1.2em; }
.docs__content .table-wrap { margin-block: 1.5em; }

.docs-nav > summary { cursor: pointer; padding: var(--space-3) var(--space-4); border: 1px solid var(--rule-2); list-style: none; }
.docs-nav > summary::-webkit-details-marker { display: none; }
.docs-nav nav { display: grid; gap: var(--space-2); }
@media (max-width: 999px) { .docs-nav nav { padding: var(--space-4); border: 1px solid var(--rule-2); border-top: 0; } }
.docs-nav__group { color: var(--fg-3); margin-top: var(--space-4); }
.docs-nav__group:first-child { margin-top: 0; }
.docs-nav ul { list-style: none; padding: 0; display: grid; }
.docs-link { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) 0 var(--space-2) var(--space-3); border-left: 1px solid var(--rule); color: var(--fg-2); font-size: 0.925rem; text-decoration: none; }
a.docs-link:hover { color: var(--fg); border-left-color: var(--rule-2); }
.docs-link--soon { color: var(--fg-3); }
.docs-link .tag { font-size: 0.6rem; padding: 0.1em 0.4em; }
.page-docs-overview .docs-link--overview,
.page-docs-models .docs-link--models { color: var(--fg); border-left-color: var(--vermilion); }

.careers-band__inner { display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
.careers-band__inner .lede { margin-inline: auto; }
.careers-band__inner .cluster { justify-content: center; }

/* ---------- Model cards ---------- */
.docs-link--sub { padding-left: var(--space-5); font-family: var(--font-mono); font-size: 0.8rem; }
.page-docs-models .docs-link--models,
.page-model-mugen-5 .docs-link--mugen-5,
.page-model-mugen-5-swift .docs-link--mugen-5-swift,
.page-model-mugen-5-deep .docs-link--mugen-5-deep,
.page-model-kirin-embed-2 .docs-link--kirin-embed-2 { color: var(--fg); border-left-color: var(--vermilion); }

.model-grid { display: grid; gap: var(--space-4); margin-block: 2em; }
@media (min-width: 720px) { .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prose .model-grid > * + * { margin-top: 0; }
.model-grid .card__title code { background: none; border: 0; padding: 0; font-size: 1em; }
.model-grid .card { text-decoration: none; }

.model-card h1 { margin-bottom: var(--space-2); }
.model-card__spec { margin-block: 1.5em 2em; }
.model-card__spec dd { font-family: var(--font-sans); font-size: 0.95rem; }
.model-changelog { list-style: none; padding: 0; border-left: 1px solid var(--rule-2); }
.prose .model-changelog li { position: relative; padding-left: var(--space-5); margin-top: var(--space-4); }
.model-changelog li::before { content: ""; position: absolute; left: -4px; top: 0.5em; width: 7px; height: 7px; background: var(--accent); }
.model-changelog time { display: block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.model-changelog p { margin-top: var(--space-1); }

/* ---------- Try it (#41) ---------- */
.try-it { margin-block: 1.5em; padding: var(--space-5); border: 1px solid var(--rule-2); }
.try-it form { gap: var(--space-2); }
.try-it label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.try-it input[type=text], .try-it textarea, .try-it select { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule-2); background: transparent; font-family: var(--font-mono); font-size: 0.8125rem; }
.try-it select { width: auto; padding: 0 var(--space-2); }
.try-it textarea { resize: vertical; line-height: 1.6; }
.try-it input:focus-visible, .try-it textarea:focus-visible, .try-it select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.try-it .try-it__check { display: flex; align-items: center; gap: var(--space-2); text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 0.9rem; color: var(--fg-2); }
.try-it__status { min-height: 1.5em; }
.try-it pre:empty { display: none; }
.try-it .code__bar label { color: inherit; }