/* /platform/api/ (itesthub/templates/core/platform_api.html).
 *
 * A dedicated sheet rather than inline styles: the page is long, it is a
 * sales asset, and the code panels alone need more rules than a template
 * should carry. Everything here is built from the Industry design system's
 * own tokens (itesthub/static/css/industry/styles.css) -- no new palette,
 * no new fonts, no external assets.
 *
 * Light-only by design, per CLAUDE.md: public marketing pages do not carry
 * a dark-mode media query. The dark panels below are a deliberate surface
 * WITHIN a light page (code should look like code), not a theme.
 *
 * Contrast: every foreground/background pair used here was checked against
 * 4.5:1 for text and 3:1 for borders and focus rings. The code panel's
 * ground is --color-accent-900 (#1d2d3d); its token colours are steps 200
 * to 400 of the existing ramps, which land between 6.9:1 and 11:1 on it.
 */

/* ── layout ─────────────────────────────────────────────────────────── */

.api-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 48px;
}

.api-wrap--narrow {
  max-width: 760px;
}

.api-section {
  padding: 74px 0;
  border-top: 1px solid var(--color-divider);
  /* The sticky sub-nav must not sit on top of a heading somebody has just
     jumped to -- including when they jumped there with a keyboard. */
  scroll-margin-top: 64px;
}

.api-section--tint {
  background: var(--color-neutral-100);
}

.api-section--dark {
  background: var(--color-accent-900);
  color: var(--color-neutral-100);
}

.api-grid-2,
.api-grid-3 {
  display: grid;
  gap: 24px;
}

.api-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.api-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.api-gap-lg {
  margin-top: 36px;
}

/* ── type ───────────────────────────────────────────────────────────── */

.platform-api h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 19ch;
}

.platform-api h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  max-width: 24ch;
}

.platform-api h3 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.2;
}

.platform-api h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

.platform-api p {
  font-size: 15px;
  line-height: 1.7;
}

.api-eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.api-eyebrow a {
  color: inherit;
}

.platform-api .api-lede {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}

.platform-api .api-fineprint {
  font-size: 13.5px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

.platform-api .api-subhead {
  margin: 48px 0 18px;
  font-size: 22px;
}

.api-list {
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
}

.api-list li + li {
  margin-top: 8px;
}

.platform-api :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  background: var(--color-accent-100);
  color: var(--color-accent-900);
}

.api-section--dark :not(pre) > code {
  background: var(--color-accent-800);
  color: var(--color-accent-100);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── hero ───────────────────────────────────────────────────────────── */

.api-hero {
  padding: 64px 0 60px;
  /* Deliberately a flat colour. A faint drafting grid lived here and looked
     good, but a background-image makes axe-core report every piece of text
     over it as "contrast could not be determined": on the one page whose
     selling point is accessibility, a clean automated verdict is worth more
     than the texture. */
  background: var(--color-bg);
}

.api-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: start;
}

.api-hero-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.platform-api .api-hero-meta {
  margin: 20px 0 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

.api-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.api-btn-lg {
  padding: 12px 26px;
  font-size: 16px;
}

.api-section--dark .btn-primary {
  background: var(--color-accent-200);
  border-color: var(--color-accent-200);
  color: var(--color-accent-900);
}

.api-section--dark .btn-primary:hover {
  background: var(--color-accent-300);
  border-color: var(--color-accent-300);
}

.api-section--dark .btn-secondary {
  color: var(--color-neutral-100);
  border-color: var(--color-accent-500);
}

.api-section--dark .btn-secondary:hover {
  background: color-mix(in srgb, var(--color-neutral-100) 12%, transparent);
}

/* ── sticky section nav ─────────────────────────────────────────────── */

.api-subnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.api-subnav ul {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 11px 48px;
  list-style: none;
  overflow-x: auto;
  font-family: var(--font-heading);
  font-size: 15px;
  white-space: nowrap;
}

.api-subnav a {
  text-decoration: none;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}

.api-subnav a:hover {
  color: var(--color-accent-800);
  text-decoration: underline;
}

/* ── the journey flow ───────────────────────────────────────────────── */

.api-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}

.api-flow > li {
  padding: 22px 24px 24px;
  background: var(--color-bg);
}

.api-flow-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  margin-bottom: 12px;
  border: 1px solid var(--color-accent-700);
  color: var(--color-accent-700);
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1;
}

.api-flow h3 {
  font-size: 18px;
}

.platform-api .api-flow p {
  margin: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* ── panels, steps, notes ───────────────────────────────────────────── */

.api-panel {
  padding: 26px 28px;
  border: 1px solid var(--color-divider);
  background: transparent;
}

.api-panel > :last-child,
.api-note > :last-child,
.api-feature p:last-child {
  margin-bottom: 0;
}

.api-panel--wide {
  margin-top: 36px;
}

.api-panel--plain {
  border-color: var(--color-neutral-400);
}

.api-step {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 30px;
  padding: 34px 0;
  border-top: 1px solid var(--color-divider);
}

.api-step:first-of-type {
  margin-top: 26px;
}

.platform-api .api-step-n {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.api-step-body > * + * {
  margin-top: 14px;
}

.api-step-body figure + figure {
  margin-top: 14px;
}

/* A request and its response sit side by side and are rarely the same
   length; stretching the shorter one leaves a slab of empty dark panel. */
.api-step-body .api-grid-2 {
  align-items: start;
}

.api-mode {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.api-mode > * {
  min-width: 0;
}

/* Three panels side by side get a narrower measure than the rest of the
   page, so the request bodies in them are set a little smaller and fit
   without scrolling at a desktop width. */
.api-mode .code-body {
  padding: 14px 16px;
  font-size: 11.5px;
}

.platform-api .api-mode p {
  margin: 0;
  font-size: 14.5px;
}

.platform-api .api-mode-tag {
  align-self: flex-start;
  padding: 4px 11px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.api-mode--feature {
  border-color: var(--color-accent-700);
}

.api-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 36px;
  margin-top: 28px;
  padding: 34px;
  border: 1px solid var(--color-accent-700);
  background: var(--color-accent-100);
}

.api-feature h3 {
  font-size: 22px;
}

.api-note {
  padding-left: 18px;
  border-left: 3px solid var(--color-neutral-500);
}

.api-note + .api-note {
  margin-top: 26px;
}

.api-note--answer {
  border-left-color: var(--color-accent-700);
}

.api-talk h2 {
  max-width: none;
}

.api-talk p {
  color: var(--color-neutral-200);
  max-width: 62ch;
}

/* ── code panels ────────────────────────────────────────────────────── */

.code {
  margin: 0;
  border: 1px solid var(--color-accent-800);
  background: var(--color-accent-900);
  /* A code panel scrolls INSIDE itself. Without these it would size to its
     longest line and push its column -- and the page -- sideways, which is
     the one layout failure a developer-facing page cannot have. */
  min-width: 0;
  max-width: 100%;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-neutral-100) 22%, transparent);
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--color-accent-300);
}

.code-label {
  /* Not uppercased: most of these labels are a URL path, and
     `POST /API/V1/ORDERS` is not the path anybody should type. */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.code-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.code-status {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-accent-200);
}

.code-copy {
  padding: 3px 10px;
  border: 1px solid var(--color-accent-500);
  background: transparent;
  color: var(--color-accent-200);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.code-copy[hidden] {
  display: none;
}

.code-copy:hover {
  background: color-mix(in srgb, var(--color-neutral-100) 14%, transparent);
}

.code-body {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-neutral-100);
  tab-size: 2;
}

.code :focus-visible {
  outline: 2px solid var(--color-accent-300);
  outline-offset: 2px;
}

.tok-key {
  color: #b5d9fd; /* --color-accent-300, 9.8:1 on the panel */
}

.tok-str {
  color: #d6ebff; /* --color-accent-200, 11.4:1 */
}

.tok-num {
  color: #9ebbd8; /* --color-accent-2-400, 7.0:1 */
}

.tok-kw {
  color: #94bce3; /* --color-accent-400, 7.0:1 */
  font-style: italic;
}

.tok-punc {
  color: #b7b7ba; /* --color-neutral-400, 6.9:1 */
}

.tok-comment {
  color: #b7b7ba;
  font-style: italic;
}

.tok-var {
  color: #94bce3;
}

.tok-cmd {
  color: #ffffff;
  font-weight: 500;
}

.tok-flag {
  color: #b5d9fd;
}

.tok-call {
  color: #d6ebff;
}

/* ── motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .code-copy,
  .api-subnav a {
    transition: background-color 120ms ease, color 120ms ease;
  }
}

/* ── responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .api-hero-grid,
  .api-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .api-flow,
  .api-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .api-wrap {
    padding: 0 20px;
  }

  .api-subnav ul {
    padding: 10px 20px;
  }

  .api-section {
    padding: 52px 0;
  }

  .api-hero {
    padding: 44px 0 46px;
  }

  .api-flow,
  .api-grid-2,
  .api-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .api-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .api-feature {
    padding: 24px 20px;
  }

  .api-panel {
    padding: 22px 20px;
  }

  .code-body {
    font-size: 12px;
  }
}