/* ─────────────────────────────────────────────────────────────────────
 * Docs layer — shared design for the documentation pages
 * (API reference / MCP / hub in this repo, and the tracking debug page).
 *
 * SOURCE OF TRUTH: this file (adtraction-api-blueprint/styles/docs.css).
 * It used to live in publicweb (wwwroot/css/docs.scss); it no longer does.
 * The build publishes it at /css/docs.css on the docs sites, e.g.
 *   https://apidocs.adtraction.net/css/docs.css
 *
 * Plain CSS, no build step. It is a LAYER on top of the site chrome, so load it
 * AFTER Bootstrap 5 and https://adtraction.com/css/dist/master.min.css (it relies
 * on master's .grid_title, .btn-secondary, .hero_thin, .brand_directions_* and
 * the runtime tokens --primary-blue-*, --grayscale-*, --accent-colors-*; every
 * var() below has a fallback). See EXTENDING.md.
 * ───────────────────────────────────────────────────────────────────── */

/* ------------------------------------------------------------------ *
 * debug.css — SUPPLEMENTARY styling for the tracking debug page
 * (ADTR-10012). The page chrome (header, hero, container width, footer,
 * fonts, buttons, form controls) comes from the site design system loaded
 * in debug.htm: Bootstrap 5 + the compiled master.min.css, like subdomain.htm.
 *
 * This file is deliberately small and editorial: it leans on the site's own
 * classes (.grid_title, .grid_content_text, .form-control, .prettyprint) and
 * CSS custom properties (--primary-blue-*, --secondary-color-*, --grayscale-*,
 * --accent-colors-*) so nothing here invents a look of its own.
 *
 * Removing this file leaves the page functional (show/hide via the `hidden`
 * attribute, copy via clipboard.js).
 * ------------------------------------------------------------------ */

/* ---- Documentation layout: content column + left sidebar nav ---- */
:root { --adt-sticky-top: 5.5rem; } /* clears the fixed navbar (~72px) */
html:has(.adt-doc) { scroll-behavior: smooth; } /* only on docs pages */
.adt-doc { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 3.5rem; align-items: start; }
.adt-doc-main { min-width: 0; }
.adt-section { scroll-margin-top: calc(var(--adt-sticky-top, 5.5rem) + 0.5rem); margin: 0 0 3rem; }
.adt-section > h2 { margin-top: 0; }
.adt-subsection { scroll-margin-top: calc(var(--adt-sticky-top, 5.5rem) + 0.5rem); margin: 2rem 0 0; }
.adt-subsection .grid_title { display: block; }

.adt-toc { position: sticky; top: var(--adt-sticky-top, 5.5rem); align-self: start; }
.adt-toc-title { font-size: 1.0625rem; font-weight: 600; color: var(--grayscale-1000, #0b0c24); margin: 0 0 0.6rem; }
.adt-toc nav { display: flex; flex-direction: column; border-left: 2px solid var(--grayscale-150, #ececee); }
.adt-toc a { padding: 0.35rem 0 0.35rem 1rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--grayscale-700, #555566); font-size: 1rem; font-weight: 300; text-decoration: none; line-height: 1.4; }
.adt-toc a:hover { color: var(--primary-blue-500, #0d1e79); }
.adt-toc a.active { color: var(--primary-blue-500, #0d1e79); border-left-color: var(--primary-blue-500, #0d1e79); font-weight: 400; }

/* ---- Reference section ---- */
.adt-def-list { margin: 1.25rem 0 0; }
.adt-def-list dt { font-size: 1.25rem; font-weight: 500; color: var(--grayscale-1000, #0b0c24); margin: 1.25rem 0 0.25rem; }
.adt-def-list dd { margin: 0; }
.adt-ref-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 0; }
.adt-ref-table td { padding: 0.75rem 1.25rem 0.75rem 0; border-top: 1px solid var(--grayscale-150, #ececee); vertical-align: baseline; font-size: 1.0625rem; font-weight: 300; line-height: 1.6; }
.adt-ref-table tr:first-child td { border-top: none; }
.adt-ref-table .k { font-family: Menlo, Monaco, Consolas, monospace; font-weight: 400; font-size: 1rem; white-space: nowrap; color: var(--primary-blue-500, #0d1e79); width: 1%; }
.adt-ref-table .nm { color: var(--grayscale-550, #83838f); white-space: nowrap; width: 1%; }
.adt-ref-table .req, .adt-ref-table .opt { font-size: 0.85rem; color: var(--grayscale-500, #aaaab3); white-space: nowrap; }

@media (max-width: 860px) {
  .adt-doc { grid-template-columns: 1fr; gap: 0; }
  .adt-toc { display: none; }
}

/* ---- Code blocks: identical to the tracking-instructions page ---- */
.prettyprint {
  background: var(--accent-colors-dune-500, #f1ece3); color: #212529 !important;
  font-size: 1rem !important;
  font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
  padding: 2rem; border-radius: 0.6rem; white-space: pre; overflow-x: auto;
}
.adt-doc code { color: #212529 !important; background-color: var(--accent-colors-dune-500, #f1ece3); padding: 3px 6px; }
.prettyprint .red, pre .red { color: var(--secondary-color-1000, #dc6a51) !important; font-weight: bold !important; }
.adt-doc .btn-secondary { margin-top: 0.75rem; margin-bottom: 1.75rem; }

/* ---- Warning banner ---- */
.adt-banner {
  display: flex; align-items: center; gap: 0.85rem;
  background: var(--secondary-color-0, #fad4c9);
  border-radius: 0.6rem; padding: 1.1rem 1.4rem; margin: 0 0 2.25rem;
  font-size: 1.25rem; font-weight: 300; line-height: 1.6; color: var(--grayscale-1000, #0b0c24);
}
.adt-banner strong { font-weight: 600; }
.adt-banner::before {
  content: "!"; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--secondary-color-1000, #dc6a51); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Filters: a plain toolbar, native form controls ---- */
.adt-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem 2rem;
  padding: 0 0 1.25rem; margin: 0.5rem 0 0.5rem;
  border-bottom: 1px solid var(--grayscale-150, #ececee);
}
.adt-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 1rem; font-weight: 300; color: var(--grayscale-700, #555566); }
.adt-field .form-control { width: 14rem; max-width: 100%; }
.adt-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 300; color: var(--grayscale-700, #555566); }
.adt-listening { margin-left: auto; align-self: center; color: var(--grayscale-550, #83838f); font-size: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.adt-listening::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--primary-blue-400, #2c3e9e); }

/* ---- Log: an editorial list, not boxed cards ---- */
#log { margin-top: 0.5rem; }
.adt-entry { padding: 1.75rem 0; border-top: 1px solid var(--grayscale-150, #ececee); }
.adt-entry:first-child { border-top: none; }

.adt-entry-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.adt-status { margin: 0 !important; }                       /* uses the site's .grid_title */
.adt-entry.valid .adt-status { color: var(--primary-blue-500, #0d1e79); }
.adt-entry.needs-fixing .adt-status { color: var(--secondary-color-1000, #dc6a51); }
.adt-gtm-tag { font-size: 0.85rem; font-weight: 400; color: var(--grayscale-550, #83838f); }
.adt-gtm-tag::before { content: "· "; }
.adt-meta { margin-left: auto; color: var(--grayscale-550, #83838f); font-size: 0.95rem; font-family: Menlo, Monaco, Consolas, monospace; }

/* param readout: airy, borderless */
.adt-params { width: 100%; border-collapse: collapse; margin: 0; }
.adt-params td { padding: 0.45rem 1.25rem 0.45rem 0; vertical-align: baseline; font-size: 1.125rem; font-weight: 300; line-height: 1.6; }
.adt-params .k { font-family: Menlo, Monaco, Consolas, monospace; font-weight: 400; font-size: 1rem; white-space: nowrap; color: var(--grayscale-550, #83838f); width: 1%; }
.adt-params .lbl { color: var(--grayscale-550, #83838f); white-space: nowrap; width: 1%; }
.adt-params .v { color: var(--grayscale-1000, #212529); width: 100%; }
.adt-params tr.fail .k, .adt-params tr.fail .v { color: var(--secondary-color-1000, #dc6a51); font-weight: 600; }

.adt-group-title { font-size: 1rem; color: var(--grayscale-550, #83838f); margin: 1.5rem 0 0.4rem; font-weight: 300; }

/* hint = the fix (calm, dune); note = informational (banana) */
.adt-hint {
  background: var(--accent-colors-dune-500, #f1ece3); border-radius: 0.6rem;
  padding: 1rem 1.25rem; margin: 1.1rem 0 0;
  font-size: 1.125rem; font-weight: 300; line-height: 1.7; color: var(--grayscale-1000, #212529);
}
.adt-notes { margin: 1.1rem 0 0; }
.adt-note { background: var(--accent-colors-banana-500, #fff9dd); border-radius: 0.6rem; padding: 0.9rem 1.25rem; margin: 0.6rem 0 0; font-size: 1.125rem; font-weight: 300; line-height: 1.7; }
.adt-note strong { font-weight: 600; }

details.adt-raw { margin-top: 1.1rem; }
details.adt-raw summary { cursor: pointer; font-weight: 400; color: var(--primary-blue-400, #2c3e9e); font-size: 1.0625rem; }
details.adt-raw summary:hover { color: var(--primary-blue-200, #9fabec); }
details.adt-raw pre {
  margin: 0.75rem 0 0; padding: 1.25rem; background: var(--accent-colors-dune-500, #f1ece3);
  border-radius: 0.6rem; overflow-x: auto; white-space: pre;
  font: 0.9rem/1.6 Menlo, Monaco, Consolas, monospace; color: #212529;
}

/* ---- Empty state ---- */
.adt-empty { padding: 3rem 0; color: var(--grayscale-550, #83838f); font-weight: 300; font-size: 1.25rem; line-height: 1.7; }
.adt-empty strong { display: block; color: var(--grayscale-1000, #0b0c24); margin-bottom: 0.6rem; font-size: 1.5625rem; font-weight: 500; }
.adt-empty #empty-check { margin: 1rem 0 0; font-size: 1.0625rem; }

@media (max-width: 560px) {
  .adt-field .form-control { width: 100%; }
  .adt-listening { margin-left: 0; }
  .adt-meta { margin-left: 0; width: 100%; }
  .prettyprint { padding: 1.25rem; border-radius: 0.6rem; }
}

/* ================================================================== *
 * Large documentation pages (e.g. the API reference) — SAME design as
 * the debug page (same tokens, cream code, coral buttons, Lexend,
 * .grid_title, .adt-ref-table), with a left endpoint sidebar added.
 * ================================================================== */

/* Layout: left sidebar + content (reuses the .adt-doc grid area styles). */
.adt-doc--nav { grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; }
.adt-doc--nav.has-rail { grid-template-columns: 16rem minmax(0, 1fr) 13rem; }
/* let the doc content span the full hero/navbar width (override the site's max-width cap) */
.brand_directions_container.adt-doc--nav { max-width: none; }

.adt-sidebar {
  position: sticky; top: var(--adt-sticky-top, 5.5rem); align-self: start;
  max-height: calc(100vh - var(--adt-sticky-top, 5.5rem) - 1rem); overflow: auto;
  padding: 0.25rem 1.5rem 0.75rem 0.1rem;
}
/* full-height vertical divider between sidebar and content (reaches the page bottom
   even when every group is collapsed, because .adt-doc--nav is as tall as the content) */
.adt-doc--nav { position: relative; }
.adt-doc--nav::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 16rem; width: 1px;
  background: var(--grayscale-150, #ececee); pointer-events: none;
}

/* sliding active indicator (JS moves it to the active link) */
.adt-nav-bar {
  position: absolute; left: 0.25rem; top: 0; width: 3px; height: 0; opacity: 0;
  border-radius: 3px; background: var(--primary-blue-500, #0d1e79); pointer-events: none;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), height .32s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
}

/* search: icon + clear button */
.docs-nav__searchwrap { position: relative; margin-bottom: 0.6rem; }
.docs-nav__searchwrap::before {
  content: ""; position: absolute; left: 0.8rem; top: 50%; width: 15px; height: 15px; transform: translateY(-50%);
  background: var(--grayscale-500, #aaaab3);
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}
.docs-nav__search {
  width: 100%; font: inherit; font-size: 0.95rem; font-weight: 300;
  padding: 0.55rem 2rem 0.55rem 2.3rem;
  border: 1px solid var(--grayscale-200, #dfe0e3); border-radius: 0.5rem; background: var(--grayscale-50, #f7f7f8); color: var(--grayscale-1000, #212529);
}
.docs-nav__search:focus { outline: none; border-color: var(--primary-blue-500, #0d1e79); background: #fff; box-shadow: 0 0 0 3px var(--primary-blue-100, #d4dafa); }
.docs-nav__clear {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; color: var(--grayscale-500, #aaaab3);
  width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: 1rem; line-height: 1; display: none;
}
.docs-nav__clear:hover { background: var(--grayscale-150, #ececee); color: var(--grayscale-700, #555566); }
.docs-nav__searchwrap.has-value .docs-nav__clear { display: inline-flex; align-items: center; justify-content: center; }

.docs-nav__tools { display: flex; gap: 1rem; margin: 0 0 1rem 0.1rem; font-size: 0.85rem; }
.docs-nav__tools button { border: none; background: none; color: var(--grayscale-550, #83838f); cursor: pointer; padding: 0; font: inherit; }
.docs-nav__tools button:hover { color: var(--primary-blue-500, #0d1e79); }

/* "no results" empty state */
.docs-nav__empty { display: none; padding: 1rem 0.4rem; color: var(--grayscale-550, #83838f); font-size: 0.9rem; }
.docs-nav__empty.show { display: block; }

/* groups = Primer "section": bold grey header + top divider */
.docs-nav__group { padding: 0.85rem 0 0.35rem; border-top: 1px solid var(--grayscale-150, #ececee); }
.docs-nav__group:first-of-type { border-top: none; padding-top: 0.35rem; }
.docs-nav__group-title {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer; font: inherit;
  padding: 0.4rem 0.2rem 0.5rem; color: var(--grayscale-1000, #0b0c24); font-weight: 700; font-size: 0.95rem;
}
.docs-nav__group-title:hover { color: var(--primary-blue-500, #0d1e79); }
.docs-nav__group-title .chev {
  width: 0.8rem; height: 0.8rem; flex: 0 0 auto; margin-left: auto;
  background: var(--grayscale-500, #aaaab3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}
.docs-nav__group-title:hover .chev { background: var(--grayscale-700, #555566); }
.docs-nav__group[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.docs-nav__group-title .label { flex: 0 1 auto; }
/* Primer-style: no badges / count pills in the headers */
.docs-nav__count, .docs-nav__badge { display: none; }

/* animated collapse (grid-rows 1fr<->0fr trick) */
.docs-nav__items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s cubic-bezier(.22, .61, .36, 1); }
.docs-nav__group[aria-expanded="false"] .docs-nav__items { grid-template-rows: 0fr; }
.docs-nav__list { overflow: hidden; min-height: 0; display: flex; flex-direction: column; }

.docs-nav__link {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.42rem 0.5rem; border-radius: 0.4rem; margin: 1px 0;
  color: var(--grayscale-1000, #0b0c24); font-size: 0.95rem; font-weight: 400; line-height: 1.5;
}
.docs-nav__link:hover { background: var(--grayscale-50, #f7f7f8); text-decoration: none; }
.docs-nav__link.active { color: var(--primary-blue-500, #0d1e79); background: var(--sky-blue-0, #eff5fc); font-weight: 600; }
.docs-nav__link[hidden], .docs-nav__group[hidden] { display: none; }

/* method badge inside a nav link */
.docs-nav__link .http-method.mini { min-width: 2.9rem; justify-content: center; }

/* nested sublist inside a collapsible group (indented child links) */
.docs-nav__sublist { overflow: hidden; min-height: 0; display: flex; flex-direction: column; padding-left: 0.85rem; }

/* code snippet with an in-box copy button, top-right */
.adt-snippet { position: relative; margin: 0 0 1.5rem; }
.adt-snippet .prettyprint { padding-right: 6rem; }
.adt-snippet .btn-copy {
  position: absolute; top: 0.6rem; right: 0.6rem; font: inherit; font-size: 0.9rem; font-weight: 500;
  color: #fff; background: var(--secondary-color-1000, #dc6a51); border: 0; border-radius: 0.5rem;
  padding: 0.35rem 0.9rem; cursor: pointer; transition: background-color .15s ease;
}
.adt-snippet .btn-copy:hover { background: var(--secondary-color-500, #e38b78); }
.adt-snippet .btn-copy.copied { background: var(--primary-blue-500, #0d1e79); }
.adt-snippet .btn-copy.copied::before { content: "\2713\00a0"; } /* ✓ */

/* docs prose: dune quote callout, navy-dot bullet list, numbered steps, lead note */
.adt-quote { background: var(--accent-colors-dune-500, #f1ece3); border-radius: 0.6rem; padding: 1rem 1.25rem; margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 300; line-height: 1.7; color: var(--grayscale-1000, #0b0c24); }
.adt-list { margin: 0.5rem 0 1rem; padding: 0; list-style: none; }
.adt-list li { position: relative; padding: 0.35rem 0 0.35rem 1.25rem; font-size: 1.0625rem; font-weight: 300; line-height: 1.7; }
.adt-list li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 5px; height: 5px; border-radius: 50%; background: var(--primary-blue-400, #2c3e9e); }
.adt-steps { margin: 0.5rem 0 1rem; padding-left: 1.4rem; }
.adt-steps li { font-size: 1.0625rem; font-weight: 300; line-height: 1.7; padding: 0.3rem 0; }
.lead-note { font-size: 1.0625rem; font-weight: 300; line-height: 1.7; color: var(--grayscale-700, #555566); }

/* endpoint block — editorial, like the debug log entries */
.endpoint { scroll-margin-top: calc(var(--adt-sticky-top, 5.5rem) + 0.5rem); padding: 2.75rem 0; border-top: 1px solid var(--grayscale-150, #ececee); }
.endpoint:first-of-type { border-top: none; padding-top: 1rem; }
.endpoint__title { display: block; margin: 0 0 0.75rem; }

/* request bar: a clear, pretty "this is the endpoint" element */
.endpoint__req {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--grayscale-50, #f7f7f8); border: 1px solid var(--grayscale-150, #ececee);
  border-radius: 0.6rem; padding: 0.6rem 0.75rem 0.6rem 0.75rem; margin: 0 0 1.1rem;
}
.endpoint__path { font-family: Menlo, Monaco, Consolas, monospace; font-size: 1.05rem; font-weight: 500; color: var(--grayscale-1000, #0b0c24); overflow-x: auto; }
.endpoint__copy {
  margin-left: auto; flex: 0 0 auto; border: none; background: none; cursor: pointer;
  width: 1.9rem; height: 1.9rem; border-radius: 0.4rem; display: inline-flex; align-items: center; justify-content: center;
  color: var(--grayscale-500, #aaaab3); transition: background-color .15s ease, color .15s ease;
}
.endpoint__copy::before {
  content: ""; width: 1.05rem; height: 1.05rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") no-repeat center / contain;
}
.endpoint__copy:hover { background: var(--grayscale-150, #ececee); color: var(--primary-blue-500, #0d1e79); }
.endpoint__copy.copied { color: var(--primary-blue-500, #0d1e79); }
.endpoint__copy.copied::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* HTTP method badge — brand palette (navy / coral), like the .tag component */
.http-method {
  font-family: Menlo, Monaco, Consolas, monospace; font-size: 0.78rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: #fff; border-radius: 0.35rem; padding: 0.22rem 0.55rem; line-height: 1;
}
.http-method.get { background: var(--primary-blue-500, #0d1e79); }
.http-method.post { background: var(--secondary-color-1000, #dc6a51); }
.http-method.put { background: var(--primary-blue-400, #2c3e9e); }
.http-method.patch { background: var(--primary-blue-300, #717fd0); }
.http-method.delete { background: var(--primary-blue-600, #051151); }
.http-method.mini { font-size: 0.6rem; padding: 0.1rem 0.35rem; }

/* request/response example label (examples themselves use .prettyprint + .btn-secondary) */
.example-label { font-size: 0.8rem !important; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--grayscale-550, #83838f); margin: 1.5rem 0 0.5rem; }

@media (max-width: 860px) {
  .adt-doc--nav, .adt-doc--nav.has-rail { grid-template-columns: 1fr; gap: 0; }
  .adt-doc--nav::before { display: none; }
  .adt-sidebar { position: static; max-height: none; margin-bottom: 2rem; }
}

/* ---- Docs navbar with page controls (API reference: API key + Live/Mock) ----
 * Only applies to a navbar that carries a .topctl block (the control markup and
 * its desktop look live in templates/nextgen/). On mobile the navbar is a
 * two-row grid: row 1 = menu · logo · Live/Mock, row 2 = API key field (status
 * dot inside it) · Show. .topctl is dissolved (display:contents) so its children
 * can be placed on the grid. Plain navbars (MCP, hub) are untouched. */
@media (max-width: 860px) {
  html:has(#navbar .topctl) { --adt-sticky-top: 7.5rem; } /* two-row navbar: keep anchors clear of it */
  #navbar:has(.topctl) .container-fluid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem 0.75rem; }
  #navbar:has(.topctl) .topctl { display: contents; }
  #navbar:has(.topctl) .topspacer { display: none; }
  #navbar:has(.topctl) .navtoggle { grid-area: 1 / 1; margin-right: 0; }
  #navbar:has(.topctl) .container-fluid > a { grid-area: 1 / 2; justify-self: start; min-width: 0; }
  #navbar:has(.topctl) .AT_logo { height: 32px; width: auto; max-width: 100%; }
  #navbar:has(.topctl) .modetoggle { grid-area: 1 / 3; }
  #navbar:has(.topctl) .modeopt { padding: 0.3rem 0.7rem; }
  #navbar:has(.topctl) .tokmini { grid-area: 2 / 1 / 3 / 3; width: auto; min-width: 0; padding-right: 1.9rem; }
  #navbar:has(.topctl) .tokdot { grid-area: 2 / 1 / 3 / 3; justify-self: end; margin-right: 0.8rem; z-index: 1; pointer-events: none; }
  #navbar:has(.topctl) #revealTok { grid-area: 2 / 3; }
}

/* ================================================================== *
 * Motion & micro-interactions — subtle, premium, on-brand.
 * All reveal/entrance motion is OPT-IN via JS (.reveal added by script),
 * so with no JS nothing is hidden. Everything is disabled under
 * prefers-reduced-motion.
 * ================================================================== */

/* smooth transitions on interactive elements */
.adt-doc .btn-secondary, .docs-nav__link, .docs-nav__group-title, details.adt-raw summary,
.adt-field .form-control, .docs-nav__search, .adt-ref-table tr, .adt-params tr,
.docs-nav__tools button, .chev {
  transition: background-color .18s ease, color .18s ease, transform .18s ease,
              box-shadow .18s ease, border-color .18s ease;
}

/* button hover lift + branded shadow */
.adt-doc .btn-secondary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(220, 106, 81, .28); }
.adt-doc .btn-secondary:active { transform: translateY(0); box-shadow: none; }

/* copy success state (JS toggles .copied for ~1.5s) */
.adt-doc .btn-secondary.copied { background: var(--primary-blue-500, #0d1e79) !important; box-shadow: 0 6px 18px rgba(13, 30, 121, .25); }
.adt-doc .btn-secondary.copied::before { content: "\2713\00a0"; } /* ✓ */

/* sidebar link hover + active ease */
.docs-nav__link:hover { background: var(--sky-blue-0, #eff5fc); border-radius: .4rem; }

/* table row hover */
.adt-ref-table tr:hover td { background: var(--grayscale-50, #f7f7f8); }

/* raw payload reveal when opened */
details.adt-raw summary:hover { opacity: .8; }

@media (prefers-reduced-motion: no-preference) {
  /* scroll reveal (class .reveal added by JS, .in when in view) */
  .reveal { opacity: 0; transform: translateY(16px); }
  .reveal.in { opacity: 1; transform: none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1); }

  /* hero + title entrance on load */
  .hero_thin .title { animation: adt-rise .6s cubic-bezier(.22, .61, .36, 1) both; }
  .brand_directions_title { animation: adt-rise .6s cubic-bezier(.22, .61, .36, 1) .06s both; }

  /* sidebar items settle in on load */
  .adt-sidebar .docs-nav__group, .adt-sidebar .docs-nav__list > .docs-nav__link {
    animation: adt-fade-in .5s ease both;
  }

  /* raw payload opening */
  details.adt-raw[open] > pre { animation: adt-rise .28s ease both; }

  /* newly rendered log entry (JS adds .adt-new) */
  .adt-entry.adt-new { animation: adt-pop-in .5s cubic-bezier(.22, .61, .36, 1) both; }

  /* "listening" dot: gentle live breathe */
  .adt-listening::before { animation: adt-breathe 2.6s ease-in-out infinite; }

  /* smooth collapse chevron already transitions; smooth filter changes */
}

@keyframes adt-rise    { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes adt-fade-in { from { opacity: 0; transform: translateY(6px);  } to { opacity: 1; transform: none; } }
@keyframes adt-pop-in  { 0% { opacity: 0; transform: translateY(10px) scale(.99); } 100% { opacity: 1; transform: none; } }
@keyframes adt-breathe { 0%, 100% { opacity: .45; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }