/* /api.html and /integration.html in the homepage theme.

   Loaded after the homepage's own stylesheets (editorial style.css, typography.css, navigation.css, footer.css,
   country-language home.css, site-language.css), so paper, panel, ink, accent, tint and line, the Manrope reading
   family, the header, the language drawer and the footer are the homepage's, not copies. This file adds what the
   homepage has no counterpart for: code blocks, tables, notes, resource cards and the interest form, drawn from the
   same material (paper surfaces, ink text, one lilac accent, hairlines, IBM Plex Mono for code).

   Light only, like the homepage. The old shared sheets (sections, polish, api, mobile-fix) are not loaded here.
   integration.html still links assets/integration-20260929/integration.css for its own markup contract; its blue
   glass rules are replaced below, so every selector here starts with body.dev and wins over its .ig rules. */

body.dev {
  --dev-wide: 64rem;              /* the column code, tables and notes share */
  --dev-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --dev-edge: #aaa5978c;          /* card borders: the pricing and FAQ cards' value */
  --dev-edge-soft: #aaa59766;     /* hairlines between sections and rows */
  --dev-accent-edge: #473b7033;   /* lilac card borders */
  --dev-string: #7a4a1f;          /* code strings: warm umber, 6.8:1 on panel */
  --dev-key: #54458c;             /* code keywords and flags: lilac-leaning violet, 7.3:1 on panel */
  --dev-fn: #285468;              /* code functions and attributes: slate teal, 7.5:1 on panel */
  --dev-num: #744060;             /* code numbers: plum, 7.2:1 on panel */
  --dev-error: #9b2c1f;           /* the sample dialog's error colours */
  --dev-error-bg: #f5e4de;
  --dev-error-ink: #6e1d12;
  --dev-lilac-card: linear-gradient(125deg, color-mix(in srgb, var(--panel) 20%, var(--tint)), var(--tint));
  --dev-band: linear-gradient(115deg, color-mix(in srgb, var(--panel) 22%, var(--tint)), var(--tint) 55%, color-mix(in srgb, var(--lilac) 14%, var(--tint)));
}

/* ---------- language: the page ships both trees, the pre-paint script picks one ---------- */
html[data-lang="en"] .l-de { display: none; }
html[data-lang="de"] .l-en { display: none; }

/* ---------- header: the three rules the homepage takes from hero.css and trial-home.css ---------- */
html.aioos-conversion .site-header > .brand img { width: 46px; height: auto; }
html.aioos-conversion .site-header .nav-demo { border-radius: 7px; transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease); }
body.dev .nav-trial { min-width: 150px; }
/* The homepage rail: a full-bleed bar whose padding is the page gutter, up to the 1440px column. These are the rules country-language
   home.css keeps for body[data-aioos-visual="20260910"] (the homepage family); the developer pages repeat them, so the logo and the
   page text start on one line at every width and the rule runs edge to edge. */
html.aioos-conversion body.dev .site-header { width: 100%; max-width: none; margin-inline: 0; padding-inline: max(var(--gutter), calc((100% - 1440px) / 2)); }
html.aioos-conversion body.dev .site-header::before { inset-inline: 0; }
html.aioos-conversion body.dev .site-header nav { min-width: 0; }
html.aioos-conversion body.dev .site-header nav a { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 820px) {
  html.aioos-conversion body.dev .site-header { grid-template-columns: auto minmax(0, 1fr) auto; height: auto; min-height: var(--navigation-height); padding-block: 8px; }
  html.aioos-conversion.nav-ready body.dev .site-header nav {
    left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: var(--gutter); max-height: calc(100dvh - 100%);
  }
  html.aioos-conversion body.dev .nav-demo { min-width: 0; max-width: 100%; white-space: normal; text-align: center; }
  html.aioos-conversion body.dev .nav-demo > span { flex: 0 0 auto; }
}
/* A page that did not get the enhancement class (no script) never shows a toggle that cannot work. */
body.dev .nav-menu-toggle { display: none; }
@media (max-width: 760px) { body.dev .nav-trial { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { html.aioos-conversion .site-header .nav-demo { transition: none; } }
/* home.css orders the language pill (1) before the sign-in link (2) by matching a[href*="signin"]. These pages link the
   sign-in as /app/ (tools/check-integration-page.py allows only that), so the same order is stated for that link. */
body.dev #homepage-navigation a[href^="/app/"] { order: 2; }

/* ---------- page frame ---------- */
body.dev .dv { width: min(100% - var(--gutter) * 2, 1440px); margin-inline: auto; padding: 0; }

/* ---------- hero ---------- */
body.dev .dv-hero { padding: clamp(40px, 6vw, 88px) 0 0; }
body.dev .eyebrow { margin: 0 0 20px; font: 600 .75rem/1.5 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
body.dev .dv-hero h1 {
  margin: 0; max-width: 24ch; font-size: clamp(2.25rem, 1.2rem + 3.9vw, 4.5rem); font-weight: 500;
  line-height: 1.04; letter-spacing: -.055em; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto;
}
body.dev .dv-hero h1 em { font-style: normal; color: var(--accent); }
body.dev .dv-hero p.sub { margin: clamp(20px, 2.4vw, 32px) 0 0; max-width: 56ch; font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height: 1.55; color: var(--muted); }

/* fact strip (api.html) */
body.dev .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; }
body.dev .facts > div { min-width: 0; padding: 16px 18px; background: var(--panel); border: 1px solid var(--dev-edge); border-radius: 10px; }
@media (max-width: 560px) {
  body.dev .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  body.dev .facts > div { padding: 14px 14px; }
  body.dev .facts > div:is(:first-child, :last-child) { grid-column: 1 / -1; }
}
body.dev .facts dt { margin: 0 0 6px; font: 600 .6875rem/1.4 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
body.dev .facts dd { margin: 0; font: 400 .8125rem/1.5 var(--dev-mono); color: var(--ink); overflow-wrap: anywhere; }

/* ---------- sections ---------- */
body.dev .dv-sec { padding: clamp(48px, 6vw, 88px) 0 0; }
body.dev .dv-sec > .dv { padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--dev-edge-soft); }
body.dev .dv-sec h2 { margin: 0 0 14px; max-width: 24ch; font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3.375rem); font-weight: 500; line-height: 1.1; letter-spacing: -.05em; }
body.dev .dv-sec h3 { margin: 40px 0 10px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
body.dev .dv-sec :is(p, .sub), body.dev .dv-hero .sub, body.dev .ig-list li { text-wrap: pretty; }
body.dev .dv-sec p { margin: 0; max-width: 62ch; font-size: 1rem; line-height: 1.7; color: var(--ink); }
body.dev .dv-sec p + p { margin-top: 12px; }
body.dev .dv-sec :is(.code, .tw, .note) + p { margin-top: 20px; }
body.dev .dv-sec p.lead { margin: 0 0 28px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--muted); }
body.dev .dv-sec :is(p, li, td, dd) a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
body.dev .dv-sec :is(p, li, td, dd) a:hover { color: var(--ink); text-decoration-thickness: 2px; }
body.dev section[id], body.dev .ig-way[id] { scroll-margin-top: 0; }   /* html's scroll-padding already clears the sticky header */

/* inline code */
body.dev :is(p, li, td, dd, h3) code {
  padding: .12em .42em; font: 400 .88em/1.2 var(--dev-mono); color: var(--ink); overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--tint) 75%, var(--panel)); border: 1px solid #473b7022; border-radius: 4px;
}

/* ---------- numbered steps: the order is real, key then session then connect ---------- */
body.dev .steps { counter-reset: st; max-width: var(--dev-wide); display: flex; flex-direction: column; gap: 44px; margin: 8px 0 0; padding: 0; list-style: none; }
body.dev .step { position: relative; min-width: 0; padding: 0 0 0 64px; }
body.dev .step::before {
  counter-increment: st; content: counter(st); position: absolute; left: 0; top: 0; width: 40px; height: 40px;
  display: grid; place-items: center; font: 600 1rem/1 var(--body); color: var(--accent);
  background: var(--tint); border: 1px solid var(--dev-accent-edge); border-radius: 50%;
}
body.dev .step h3 { margin: 6px 0 8px; }
@media (max-width: 640px) {
  body.dev .step { padding-left: 0; }
  body.dev .step::before { position: static; margin-bottom: 14px; }
  body.dev .step h3 { margin-top: 0; }
}

/* ---------- code ---------- */
body.dev .code { min-width: 0; max-width: var(--dev-wide); margin-top: 18px; overflow: hidden; background: var(--panel); border: 1px solid var(--dev-edge); border-radius: 8px; }
body.dev .code-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px 8px 16px; background: var(--soft); border-bottom: 1px solid var(--dev-edge-soft); }
body.dev .code-bar .lbl { margin-right: auto; font: 600 .8125rem/1.4 var(--body); color: var(--muted); overflow-wrap: anywhere; }
body.dev .tabs { display: flex; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--dev-edge); border-radius: 8px; }
body.dev .tab { min-height: 34px; cursor: pointer; padding: 4px 12px; font: 600 .8125rem/1.2 var(--body); color: var(--muted); background: transparent; border-radius: 5px; transition: background 160ms var(--ease), color 160ms var(--ease); }
body.dev .tab:hover { color: var(--ink); }
body.dev .tab[aria-selected="true"] { color: var(--panel); background: var(--ink); }
body.dev .copy { min-width: 6.25rem; min-height: 40px; padding: 6px 14px; cursor: pointer; font: 600 .8125rem/1.2 var(--body); color: var(--ink); background: transparent; border: 1px solid var(--dev-edge); border-radius: 6px; transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease); }
body.dev .copy:hover { background: var(--tint); border-color: var(--accent); color: var(--accent); }
body.dev .code pre { margin: 0; padding: 18px 20px; overflow-x: auto; background:
    linear-gradient(to right, var(--panel) 30%, #f8f4e900) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--panel) 30%, #f8f4e900) right center / 28px 100% no-repeat local,
    linear-gradient(to right, #191b1b2e, #191b1b00) left center / 12px 100% no-repeat scroll,
    linear-gradient(to left, #191b1b2e, #191b1b00) right center / 12px 100% no-repeat scroll,
    var(--panel); }
body.dev .code pre:focus-visible, body.dev .tw:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
body.dev .code pre[hidden] { display: none; }
/* Without script both samples show, one under the other, each named; the tabs and Copy need script. */
body.dev .code pre[data-name]::before { display: block; margin-bottom: 8px; font: 600 .75rem/1.4 var(--body); color: var(--muted); content: attr(data-name); }
html:not(.js) body.dev :is(.tabs, .copy) { display: none; }
html.js body.dev .code pre[data-p]::before { content: none; }
html.js body.dev .code pre[data-p="js"] { display: none; }
html.js body.dev .code[data-tab="js"] pre[data-p="js"] { display: block; }
html.js body.dev .code[data-tab="js"] pre[data-p="curl"] { display: none; }
body.dev .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.dev .copy[data-state="failed"] { color: var(--dev-error-ink); border-color: var(--dev-error); }
@media (max-width: 480px) { body.dev .code-bar:has(.tabs) .lbl { flex: 1 0 100%; } body.dev .code-bar .tabs { margin-right: auto; } }
@media (pointer: coarse) { body.dev .tab, body.dev .copy { min-height: 44px; } }
body.dev .code code { display: block; padding: 0; font: 400 .8125rem/1.7 var(--dev-mono); color: var(--ink); white-space: pre; tab-size: 2; background: none; border: 0; }
body.dev .code .c { color: var(--muted); }
body.dev .code .s { color: var(--dev-string); }
body.dev .code .k { color: var(--dev-key); }
body.dev .code .f { color: var(--dev-fn); }
body.dev .code .n { color: var(--dev-num); }

/* ---------- tables: they scroll inside their own frame, never the page ---------- */
body.dev .tw { max-width: var(--dev-wide); margin-top: 20px; overflow-x: auto; background: var(--panel); border: 1px solid var(--dev-edge); border-radius: 8px;
  background-image:
    linear-gradient(to right, var(--panel) 30%, #f8f4e900), linear-gradient(to left, var(--panel) 30%, #f8f4e900),
    linear-gradient(to right, #191b1b2e, #191b1b00), linear-gradient(to left, #191b1b2e, #191b1b00);
  background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll; }
body.dev table { width: 100%; min-width: 40rem; margin: 0; border-collapse: collapse; }
body.dev th { padding: 13px 16px; text-align: left; white-space: nowrap; font: 600 .6875rem/1.4 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--soft); border-bottom: 1px solid var(--dev-edge); }
body.dev td { padding: 14px 16px; vertical-align: top; font-size: .9375rem; line-height: 1.6; color: var(--ink); border-bottom: 1px solid var(--dev-edge-soft); }
body.dev tr:last-child td { border-bottom: 0; }
body.dev td:first-child { white-space: nowrap; font-weight: 600; }
body.dev td .req { display: block; margin-top: 3px; font: 600 .6875rem/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
body.dev td .opt { display: block; margin-top: 3px; font: 600 .6875rem/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
body.dev td.st { font-family: var(--dev-mono); font-weight: 400; }
/* Identifiers stay on one line; the description column takes the slack. */
body.dev table { table-layout: fixed; }
body.dev col.c-name { width: 11rem; }
body.dev col.c-type { width: 8.5rem; }
body.dev col.c-status { width: 5.5rem; }
body.dev col.c-err { width: 15rem; }
body.dev td code { white-space: nowrap; overflow-wrap: normal; }

/* ---------- on this page (api.html): a column from 1400px, a row of chips below ---------- */
body.dev .dv-body { position: relative; }
body.dev .dv-toc { width: min(100% - var(--gutter) * 2, 1440px); margin: clamp(28px, 3vw, 40px) auto 0; }
body.dev .dv-toc-title { margin: 0 0 8px; font: 600 .75rem/1.5 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
body.dev .dv-toc ul { margin: 0; padding: 0; list-style: none; }
body.dev .dv-toc a { color: var(--ink); text-decoration: none; }
body.dev .dv-toc a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
body.dev .dv-toc a[aria-current="true"] { color: var(--accent); font-weight: 600; }
body.dev .dv-toc-in > ul { display: flex; flex-wrap: wrap; gap: 8px; }
body.dev .dv-toc-in > ul > li > a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; font-size: .875rem; font-weight: 550; background: var(--panel); border: 1px solid var(--dev-edge); border-radius: 999px; }
body.dev .dv-toc-in > ul > li > a:hover { border-color: var(--accent); text-decoration: none; }
body.dev .dv-toc ul ul { display: none; }
@media (min-width: 1400px) {
  body.dev .dv-toc { position: absolute; z-index: 1; top: 0; bottom: 0; right: max(var(--gutter), (100% - 1440px) / 2); width: 12rem; margin: 0; }
  body.dev .dv-toc-in { position: sticky; top: 96px; padding-top: 20px; }
  /* the section rules stop short of the TOC column, so no rule runs through the nav; only sections after a .dv-toc (api.html), and not the closing band */
  body.dev .dv-toc ~ .dv-sec:not(.dv-end) > .dv { border-top: 0; background: linear-gradient(var(--dev-edge-soft), var(--dev-edge-soft)) top left / calc(100% - 13.5rem) 1px no-repeat; }
  body.dev .dv-toc-title { margin-bottom: 12px; }
  body.dev .dv-toc ul { display: block; }
  body.dev .dv-toc-in > ul > li > a { display: block; min-height: 0; padding: 6px 0 6px 14px; font-size: .875rem; background: none; border: 0; border-left: 2px solid var(--dev-edge-soft); border-radius: 0; }
  body.dev .dv-toc-in > ul > li > a:hover, body.dev .dv-toc a[aria-current="true"] { border-left-color: var(--accent); }
  body.dev .dv-toc ul ul { display: block; }
  body.dev .dv-toc ul ul a { display: block; padding: 4px 0 4px 28px; font-size: .8125rem; color: var(--muted); border-left: 2px solid var(--dev-edge-soft); }
}
/* heading anchors: a quiet link that shows on hover and focus */
body.dev .dv-anchor { margin-left: .4em; font-weight: 400; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity 160ms var(--ease); }
body.dev :is(h2, h3):is(:hover, :focus-within) .dv-anchor, body.dev .dv-anchor:focus-visible { opacity: 1; }
body.dev .dv-anchor:hover { color: var(--accent); }
@media (hover: none) { body.dev .dv-anchor { display: none; } }

/* ---------- note: the interface never lies ---------- */
body.dev .note { max-width: var(--dev-wide); margin-top: 24px; padding: 18px 22px; background: var(--dev-lilac-card); border: 1px solid var(--dev-accent-edge); border-left: 3px solid var(--accent); border-radius: 8px; }
body.dev .dv-sec .note p { max-width: none; font-size: .9375rem; line-height: 1.65; }

/* ---------- resource cards ---------- */
body.dev .res { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 16px; margin: 8px 0 0; }
body.dev .res a { display: block; min-width: 0; padding: clamp(20px, 2.4vw, 28px); color: var(--ink); background: var(--panel); border: 1px solid var(--dev-edge); border-radius: 10px; text-decoration: none; transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease); }
body.dev .res h3 { margin: 0 0 8px; font-family: inherit; font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; overflow-wrap: anywhere; }
body.dev .dv-sec .res p { max-width: none; font-size: .9375rem; line-height: 1.6; color: var(--muted); }
body.dev .res .arrow { display: inline-block; margin-top: 14px; font-size: .9375rem; font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.dev .res a:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 12px 24px #191b1b08; }
}
body.dev .res a:focus-visible { border-color: var(--accent); }

/* the closing band: a full-width lilac gradient, like the homepage's last section */
body.dev .dv-end { margin-top: clamp(56px, 7vw, 96px); padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 96px); background: var(--dev-band); border-top: 1px solid var(--dev-accent-edge); }
body.dev .dv-end > .dv { padding-top: 0; border-top: 0; }

/* ---------- reveal on arrival (only with JS, so the text is visible without it; transform and opacity only, never with reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js body.dev .rise { animation: dev-rise 600ms var(--ease) both; }
  html.js body.dev .rise.d1 { animation-delay: 70ms; }
  html.js body.dev .rise.d2 { animation-delay: 130ms; }
  html.js body.dev .rise.d3 { animation-delay: 200ms; }
}
@keyframes dev-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- integration.html ---------- */
body.dev .ig-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: clamp(24px, 3vw, 36px); }
body.dev .dv-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: clamp(24px, 3vw, 36px); }
body.dev .dv-actions .ig-btn { min-width: 0; }
@media (max-width: 479px) { body.dev .dv-actions .ig-btn { flex: 1 1 100%; } }
/* The free-sample link in the header is a quiet text link on the developer pages: the primary actions here are the console and the key. */
html.aioos-conversion body.dev .site-header .nav-trial { min-width: 0; background: transparent; border-color: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
html.aioos-conversion body.dev .site-header .nav-trial:hover, html.aioos-conversion body.dev .site-header .nav-trial:focus-visible { background: transparent; color: var(--accent); border-color: transparent; }
body.dev .ig-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; padding: 14px 20px;
  font: 600 .9375rem/1.3 var(--body); letter-spacing: 0; text-decoration: none; border: 1px solid var(--ink); border-radius: 4px; box-shadow: none;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
body.dev .ig-btn-primary { color: var(--panel); background: var(--ink); }
body.dev .ig-btn-primary:hover { background: var(--accent); border-color: var(--accent); transform: none; }
body.dev .ig-btn-ghost { color: var(--ink); background: transparent; border-color: var(--line); }
body.dev .ig-btn-ghost:hover { background: var(--tint); border-color: var(--accent); transform: none; }
body.dev .ig-arrow { font-size: 1.25rem; line-height: 1; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { body.dev .ig-btn:hover { transform: translateY(-2px); } }

body.dev .ig-ways { display: flex; flex-direction: column; gap: 20px; }
body.dev .ig-way { min-width: 0; padding: clamp(22px, 2.6vw, 34px); background: var(--panel); border: 1px solid var(--dev-edge); border-radius: 10px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.dev .dv-sec .ig-tag { margin: 0 0 8px; font: 600 .75rem/1.5 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
body.dev .dv-sec .ig-way h3 { margin: 0 0 10px; font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); }
body.dev .ig-way .code { margin-top: 20px; }
body.dev .dv-sec .ig-first { margin-top: 18px; font-size: .9375rem; }
body.dev .dv-sec .ig-more { margin-top: 8px; font-size: .9375rem; }
body.dev .ig-list { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
body.dev .ig-list li { position: relative; max-width: 62ch; padding-left: 24px; font-size: 1rem; line-height: 1.65; color: var(--ink); }
body.dev .ig-list li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
body.dev .ig-steps { margin-top: 8px; gap: 36px; }
body.dev .ig-steps .step { padding: 0 0 0 64px; }
body.dev .ig-steps .step::after { content: none; }
body.dev .ig-steps .step h3 { margin: 6px 0 8px; }
body.dev .ig-steps .step p { margin-top: 0; }
@media (max-width: 640px) { body.dev .ig-steps .step { padding: 0; } body.dev .ig-steps .step h3 { margin-top: 0; } }
body.dev .dv-sec .ig-aside { margin-top: 20px; font-size: .9375rem; }
body.dev .dv-sec .ig-aside a, body.dev .dv-sec .ig-direct a { white-space: nowrap; }

/* interest form: the sample dialog's fields, on a paper card */
body.dev .ig-interest { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { body.dev .ig-interest { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
body.dev .ig-interest-intro { min-width: 0; }
body.dev .dv-sec .ig-direct { margin-top: 20px; font-size: 1rem; }
body.dev .ig-card { min-width: 0; padding: clamp(20px, 2.8vw, 36px); background: var(--panel); border: 1px solid var(--dev-edge); border-top: 3px solid var(--accent); border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.dev .ig-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 560px) { body.dev .ig-row { grid-template-columns: minmax(0, 1fr); } }
body.dev .ig-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 18px; }
body.dev .ig-field label { font-size: .875rem; font-weight: 600; color: var(--ink); }
body.dev .ig-opt { font-weight: 500; color: var(--muted); }
body.dev .ig-field input, body.dev .ig-field textarea {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 52px; padding: 13px 16px; font: 500 1rem/1.4 var(--type-family);
  color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 4px; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
body.dev .ig-field textarea { min-height: 120px; resize: vertical; }
body.dev .ig-field input::placeholder, body.dev .ig-field textarea::placeholder { color: var(--muted); opacity: 1; }
body.dev .ig-field input:focus-visible, body.dev .ig-field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--ink); }
body.dev .ig-field [aria-invalid="true"] { border-color: var(--dev-error); }
body.dev .dv-sec .ig-err { margin: 2px 0 0; font-size: .875rem; line-height: 1.45; font-weight: 600; color: var(--dev-error); }
body.dev .ig-consent { display: flex; gap: 12px; align-items: flex-start; margin: 2px 0 4px; }
body.dev .ig-consent input { flex: none; width: 24px; height: 24px; margin: 10px 0 0; accent-color: var(--accent); cursor: pointer; }
body.dev .ig-consent input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
body.dev .ig-consent input[aria-invalid="true"] { outline: 2px solid var(--dev-error); outline-offset: 2px; }
body.dev .ig-consent label { flex: 1; min-width: 0; min-height: 44px; padding-block: 10px; font-size: .875rem; line-height: 1.55; color: var(--ink); cursor: pointer; }
body.dev .dv-sec .ig-status { max-width: none; margin-top: 14px; padding: 12px 14px; font-size: .9375rem; line-height: 1.5; color: var(--dev-error-ink); background: var(--dev-error-bg); border: 0; border-left: 3px solid var(--dev-error); border-radius: 0; }
body.dev .dv-sec .ig-status a { color: var(--dev-error-ink); text-decoration: underline; text-underline-offset: 3px; border: 0; }
body.dev .ig-submit {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: 18px; padding: 0 26px;
  font: 600 1rem/1.3 var(--type-family); letter-spacing: 0; color: var(--panel); background: var(--ink); border: 1px solid var(--ink); border-radius: 4px; cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
body.dev .ig-submit:hover { background: var(--accent); border-color: var(--accent); transform: none; }
body.dev .ig-submit:disabled { color: var(--panel); background: var(--muted); border-color: var(--muted); opacity: 1; cursor: default; transform: none; }
body.dev #interestForm[aria-busy="true"] .ig-submit { cursor: progress; }
@media (min-width: 561px) { body.dev .ig-submit { width: auto; min-width: 14rem; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { body.dev .ig-submit:enabled:hover { transform: translateY(-2px); } }
body.dev .dv-sec .ig-noscript { margin-top: 12px; font-size: .875rem; }
body.dev .ig-done { padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); }
body.dev .dv-sec .ig-done h3 { margin: 0 0 10px; }
body.dev .dv-sec .ig-done h3:focus { outline: none; }
body.dev .ig-done p + p { margin-top: 10px; }

/* ---------- footer: the homepage's (footer.css) ---------- */
body.dev .site-footer .footer-grid nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- small screens and long translations ---------- */
@media (max-width: 640px) {
  body.dev .dv-sec h3 { margin-top: 32px; }
  body.dev .code pre { padding: 16px 16px; }
  body.dev .code-bar { padding-left: 14px; }
  body.dev td, body.dev th { padding-inline: 14px; }
}

/* ---------- forced colours: borders carry the structure ---------- */
@media (forced-colors: active) {
  body.dev .tab[aria-selected="true"] { outline: 2px solid Highlight; }
  body.dev .step::before { border-color: CanvasText; }
  body.dev .ig-btn, body.dev .ig-submit { border-color: ButtonText; }
}

/* ---------- interest form: states without script, and while sending ---------- */
html:not(.js) body.dev #interestForm { display: none; }
body.dev .ig-submit[aria-disabled="true"] { color: var(--panel); background: var(--muted); border-color: var(--muted); cursor: progress; transform: none; }
body.dev .ig-submit[aria-disabled="true"]:hover { background: var(--muted); border-color: var(--muted); transform: none; }
body.dev .ig-submit:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }