/* Docs (S4): the page-actions row above every article (copy / view as
   markdown, open in Claude / ChatGPT, add MCP server) and the
   "Was this page helpful?" feedback widget. Motion tokens only. */

/* --- page actions ---------------------------------------------------------- */

.docs-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin: -8px 0 20px;
}

.docs-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--color-link-water);
  border-radius: 6px;
  background: var(--color-white);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-mirage-70);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.docs-action-btn:hover {
  color: var(--color-mirage);
  border-color: var(--color-mirage-30);
  text-decoration: none;
}

.docs-action-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.docs-action-btn.is-copied {
  color: var(--color-token-green-ink);
  border-color: var(--color-token-green);
  background: var(--color-secondary-token-green-light);
}

.docs-action-btn-mcp {
  color: var(--color-primary);
  border-color: var(--color-primary-light);
  background: var(--color-primary-light);
}

.docs-action-btn-mcp:hover {
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}

.docs-action-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.docs-action-toast {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-token-green-ink);
}

.docs-action-toast.is-error {
  color: var(--color-token-red-ink);
}

/* --- feedback widget ---------------------------------------------------------- */

.docs-feedback {
  margin: 0 0 8px;
  padding: 16px 18px;
  border: 1px solid var(--color-link-water);
  border-radius: 10px;
  background: var(--color-app-bg);
}

.docs-feedback-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.docs-feedback-question {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mirage);
}

.docs-feedback-buttons {
  display: inline-flex;
  gap: 6px;
}

.docs-feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-link-water);
  border-radius: 6px;
  background: var(--color-white);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-mirage-70);
  cursor: pointer;
}

.docs-feedback-btn:hover {
  color: var(--color-mirage);
  border-color: var(--color-mirage-30);
}

.docs-feedback-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.docs-feedback-btn.is-selected,
.docs-feedback-btn[aria-pressed="true"] {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.docs-feedback-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.docs-feedback-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.docs-feedback-comment {
  margin: 14px 0 0;
}

.docs-feedback-label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-mirage-80);
}

.docs-feedback-optional {
  margin-left: 6px;
  font-weight: 400;
  color: var(--color-muted);
}

.docs-feedback-textarea {
  width: 100%;
  max-width: 560px;
  font-size: 14px;
}

.docs-feedback-comment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.docs-feedback-skip {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--color-muted);
  cursor: pointer;
}

.docs-feedback-skip:hover {
  color: var(--color-mirage);
  text-decoration: underline;
}

.docs-feedback-thanks {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--color-token-green-ink);
}

.docs-feedback-error {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--color-token-red-ink);
}

@media (max-width: 640px) {
  .docs-page-actions {
    justify-content: flex-start;
  }

  /* Icon-only on phones, but keep the label in the accessibility tree: the
     SVG is aria-hidden, so display:none would leave a link with no
     accessible name. Same off-screen recipe as .docs-visually-hidden. */
  .docs-action-btn:not(.docs-action-btn-mcp) span {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
}
/* Docs (S2): code blocks, the Rouge token theme (class-based, CSP-safe),
   the copy button and the {{API_KEY}} hydration slot. Everything is tinted
   from the Motion tokens so the light theme reads as one system. */

.docs-code-block {
  position: relative;
  margin: 0 0 20px;
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  background: var(--color-app-bg);
  overflow: hidden;
}

.docs-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--color-link-water);
  background: var(--color-white);
}

.docs-code-lang {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

.docs-copy-btn {
  appearance: none;
  padding: 3px 10px;
  border: 1px solid var(--color-link-water);
  border-radius: 6px;
  background: var(--color-white);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mirage-70);
  cursor: pointer;
}

.docs-copy-btn:hover {
  color: var(--color-mirage);
  border-color: var(--color-mirage-30);
}

.docs-copy-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.docs-copy-btn.is-copied {
  color: var(--color-token-green-ink);
  border-color: var(--color-token-green);
  background: var(--color-secondary-token-green-light);
}

.docs-copy-btn.is-error {
  color: var(--color-token-red-ink);
  border-color: var(--color-token-red);
}

.docs-code {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-mirage);
  tab-size: 2;
}

.docs-code code {
  display: block;
  white-space: pre;
}

/* Code blocks take focus so a keyboard can scroll a long line (QA DEF-12).
   Inset ring: .docs-code-block clips anything drawn outside the <pre>. */
.docs-code:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Markdown code blocks the renderer did not wrap (should not happen, but a
   bare <pre> must still look intentional). */
.docs-prose > pre {
  margin: 0 0 20px;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  background: var(--color-app-bg);
  font-size: 13px;
}

/* --- key placeholder ------------------------------------------------------ */

/* Unhydrated: dashed underline, so a reader who is not signed in can see the
   value is a placeholder. The docs-session controller (S3) adds .is-hydrated
   after swapping the text for the reader's masked key. */
.docs-key {
  border-bottom: 1px dashed var(--color-primary);
  color: var(--color-primary);
  font-weight: 500;
}

.docs-key.is-hydrated {
  border-bottom-style: solid;
  color: var(--color-token-green-ink);
  border-bottom-color: var(--color-token-green);
}

/* --- Rouge theme (token classes) ----------------------------------------- */

.highlight .c,  .highlight .c1, .highlight .cm,
.highlight .cs, .highlight .cp, .highlight .ch { color: var(--color-muted); font-style: italic; }   /* comments */

.highlight .k,  .highlight .kd, .highlight .kn, .highlight .kp,
.highlight .kr, .highlight .kt, .highlight .kv { color: var(--color-primary); font-weight: 500; }   /* keywords */
.highlight .kc                                    { color: var(--color-token-purple-ink); }           /* constants true/false/nil */

.highlight .s,  .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc,
.highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx,
.highlight .sr, .highlight .ss, .highlight .dl  { color: var(--color-token-green-ink); }           /* strings */

.highlight .m,  .highlight .mi, .highlight .mf, .highlight .mh,
.highlight .mo, .highlight .mb, .highlight .mx, .highlight .il { color: var(--color-token-purple-ink); } /* numbers */

.highlight .na                                   { color: var(--color-mirage); }                      /* attribute / key */
.highlight .nb, .highlight .bp                   { color: var(--color-token-yellow-ink); }            /* builtins */
.highlight .nc, .highlight .nn                   { color: var(--color-token-yellow-ink); font-weight: 500; } /* classes, namespaces */
.highlight .nf, .highlight .fm                   { color: var(--color-catalina-blue); font-weight: 500; }   /* functions */
.highlight .nt                                   { color: var(--color-primary); }                     /* tags / JSON keys in some lexers */
.highlight .nv, .highlight .vi, .highlight .vg,
.highlight .vc, .highlight .vm, .highlight .nl   { color: var(--color-token-red-ink); }               /* variables, labels */
.highlight .nx, .highlight .n, .highlight .py    { color: var(--color-mirage); }
.highlight .no                                   { color: var(--color-token-purple-ink); }
.highlight .ne                                   { color: var(--color-token-red-ink); }
.highlight .nd                                   { color: var(--color-token-yellow-ink); }

.highlight .o, .highlight .ow                    { color: var(--color-mirage-70); }                   /* operators */
.highlight .p, .highlight .pi                    { color: var(--color-mirage-70); }                   /* punctuation */

.highlight .err                                  { color: var(--color-token-red-ink); }
.highlight .gh, .highlight .gu                   { color: var(--color-mirage); font-weight: 600; }
.highlight .gi                                   { color: var(--color-token-green-ink); }
.highlight .gd                                   { color: var(--color-token-red-ink); }
.highlight .w                                    { color: inherit; }

/* Shell: the command name and flags carry no distinct token in Rouge's
   shell lexer beyond .nb/.nv — keep them readable rather than loud. */
.highlight[data-lang="shell"] .nb                { color: var(--color-mirage); font-weight: 600; }
.highlight[data-lang="shell"] .nv                { color: var(--color-token-purple-ink); }

/* JSON keys are .nl in Rouge's JSON lexer — same colour as HTML attributes. */
.highlight[data-lang="json"] .nl                 { color: var(--color-mirage); }

/* Off-screen but still in the accessibility tree: the execCommand copy
   fallback textarea and the copy button's aria-live status region. */
.docs-visually-hidden {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}
/*
 * Docs: API error-code pages (slice S6).
 *   /docs/api/errors            index grouped by HTTP status
 *   /docs/api/errors/<code>     one page per code
 *
 * Motion tokens only (application.css :root). Status badges follow the DS
 * contrast rule: the brand --color-token-* values are fills and dots, the
 * -ink values are text. 4xx and 429 are yellow (the caller can fix it), 5xx
 * is red (we have to).
 */

.docs-errors {
  max-width: 820px;
}

.docs-errors-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--color-mirage-70);
}

.docs-errors-breadcrumb a {
  color: var(--color-mirage-70);
  text-decoration: none;
}

.docs-errors-breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.docs-errors-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-link-water);
}

.docs-errors-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-mirage-60);
}

.docs-errors-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.docs-errors-status-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-mirage-70);
}

.docs-errors-title {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-mirage);
  overflow-wrap: anywhere;
}

.docs-errors-title code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  font-weight: 600;
}

.docs-errors-lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-mirage-80);
}

.docs-errors-label {
  display: inline-block;
  margin-right: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-mirage-60);
}

.docs-errors-message-text {
  font-style: italic;
}

/* --- status badge -------------------------------------------------------- */

.docs-errors-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.docs-errors-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.docs-errors-badge--4xx,
.docs-errors-badge--429 {
  color: var(--color-token-yellow-ink);
  background-color: color-mix(in srgb, var(--color-token-yellow) 16%, var(--color-white));
  border-color: color-mix(in srgb, var(--color-token-yellow) 45%, var(--color-white));
}

.docs-errors-badge--4xx .docs-errors-badge-dot,
.docs-errors-badge--429 .docs-errors-badge-dot {
  background-color: var(--color-token-yellow);
}

.docs-errors-badge--5xx {
  color: var(--color-token-red-ink);
  background-color: color-mix(in srgb, var(--color-token-red) 12%, var(--color-white));
  border-color: color-mix(in srgb, var(--color-token-red) 40%, var(--color-white));
}

.docs-errors-badge--5xx .docs-errors-badge-dot {
  background-color: var(--color-token-red);
}

/* --- sections ------------------------------------------------------------ */

.docs-errors-section {
  margin-bottom: 36px;
}

.docs-errors-section h2 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-mirage);
}

.docs-errors-group-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.docs-errors-section p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-mirage-80);
}

.docs-errors-list {
  margin: 0;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-mirage-80);
}

.docs-errors-list li {
  margin-bottom: 8px;
}

.docs-errors-list li::marker {
  color: var(--color-mirage-60);
}

.docs-errors-list--ordered li::marker {
  font-weight: 600;
  color: var(--color-primary);
}

.docs-errors code,
.docs-errors-list code,
.docs-errors-table code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 4px;
  background-color: var(--color-mirage-05);
  color: var(--color-mirage);
}

/* Example envelopes use the shared docs code block (Docs::Renderer
   .code_block via docs_code); the inline-code tint above must not leak into
   the highlighted <pre>. */
.docs-errors .docs-code code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.docs-errors-example-caption {
  font-size: 13px;
  color: var(--color-mirage-70);
}

/* --- tables -------------------------------------------------------------- */

.docs-errors-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-link-water);
  border-radius: 9px;
  background-color: var(--color-white);
}

.docs-errors-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}

.docs-errors-table th,
.docs-errors-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-link-water);
}

.docs-errors-table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-mirage-60);
  background-color: var(--color-app-bg);
}

.docs-errors-table tbody tr:last-child td {
  border-bottom: 0;
}

.docs-errors-table tbody tr:hover td {
  background-color: var(--color-app-bg);
}

.docs-errors-table td {
  color: var(--color-mirage-80);
}

.docs-errors-fields td:nth-child(2) {
  color: var(--color-mirage-60);
  white-space: nowrap;
}

.docs-errors-code-link {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.docs-errors-code-link:hover {
  text-decoration: underline;
}

.docs-errors-message {
  color: var(--color-mirage-70);
}

/* --- operations list ----------------------------------------------------- */

.docs-errors-operations {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.docs-errors-operation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  font-size: 14px;
}

.docs-errors-operation-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-mirage);
  text-decoration: none;
}

.docs-errors-operation-link:hover .docs-errors-operation-path {
  text-decoration: underline;
  color: var(--color-primary);
}

/* Method badges are the shared .docs-method (docs_method_badge, reference.css). */

.docs-errors-operation-path,
.docs-errors-operation-id {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.docs-errors-operation-summary {
  color: var(--color-mirage-60);
}

/* --- footer -------------------------------------------------------------- */

.docs-errors-footer {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--color-link-water);
}

.docs-errors-back {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}

.docs-errors-back:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .docs-errors-title {
    font-size: 24px;
  }

  .docs-errors-table th,
  .docs-errors-table td {
    padding: 8px 10px;
  }
}
/* Docs (S2): sidebar navigation, table of contents, article chrome
   (breadcrumbs, header, byline). Layout grid itself lives in docs.css. */

/* --- page ground ---------------------------------------------------------- */

/* The docs are light-theme only (the Motion palette has no dark variant), so
   the page must paint its own ground and ink explicitly: with the host in
   dark mode a transparent <html> would otherwise show the browser's dark
   canvas behind light text, and form controls would render dark. Every
   surface below (sidebar, main, aside) sets its own background as well so
   nothing inherits a foreign ground. */
html:has(> body.docs-body) {
  background: var(--color-app-bg);
  color-scheme: light;
}

body.docs-body {
  background: var(--color-app-bg);
  color: var(--color-mirage-80);
}

.docs-shell,
.docs-main {
  background: var(--color-white);
}

.docs-sidebar,
.docs-aside {
  background: var(--color-white);
}

.docs-sidebar,
.docs-aside,
.docs-main {
  color: var(--color-mirage-80);
}

/* --- sidebar nav -------------------------------------------------------- */

.docs-nav-group {
  margin-bottom: 20px;
}

.docs-nav-heading {
  display: block;
  margin: 0 0 6px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
}

.docs-nav-heading-link:hover {
  color: var(--color-mirage);
}

.docs-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-nav-list-nested {
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--color-link-water);
}

.docs-nav-item {
  margin: 1px 0;
}

.docs-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-mirage-80);
  text-decoration: none;
}

.docs-nav-link:hover {
  background: var(--color-mirage-05);
  color: var(--color-mirage);
}

.docs-nav-link.is-active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 500;
}

.docs-nav-label {
  min-width: 0;
  flex: 1;
}

.docs-nav-date {
  font-size: 11px;
  color: var(--color-muted);
  white-space: nowrap;
}

.docs-nav-details {
  margin: 0;
}

.docs-nav-summary {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mirage);
  cursor: pointer;
  list-style: none;
}

.docs-nav-summary::-webkit-details-marker {
  display: none;
}

.docs-nav-summary::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-right: 1.5px solid var(--color-mirage-60);
  border-bottom: 1.5px solid var(--color-mirage-60);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.docs-nav-details[open] > .docs-nav-summary::before {
  transform: rotate(45deg);
}

.docs-nav-summary:hover {
  background: var(--color-mirage-05);
}

.docs-nav-method {
  flex-shrink: 0;
  min-width: 34px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
}

.docs-nav-method-get    { color: var(--color-token-green-ink); }
.docs-nav-method-post   { color: var(--color-primary); }
.docs-nav-method-put,
.docs-nav-method-patch  { color: var(--color-token-yellow-ink); }
.docs-nav-method-delete { color: var(--color-token-red-ink); }

/* Server-side collapsed sidebar (docs/_sidebar): a group that does not hold
   the current page is its heading as a link; a tag or tool list inside the
   open group is one link with a page count until one of its pages is the
   current one. */
.docs-nav-heading-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 10px;
}

.docs-nav-heading-collapsed::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--color-mirage-60);
  border-bottom: 1.5px solid var(--color-mirage-60);
  transform: rotate(-45deg);
}

.docs-nav-group.is-collapsed {
  margin-bottom: 8px;
}

.docs-nav-link-parent {
  font-weight: 500;
  color: var(--color-mirage);
}

.docs-nav-count {
  flex-shrink: 0;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--color-mirage-05);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  color: var(--color-mirage-70);
}

.docs-nav-foot {
  margin: 12px 0 0;
  padding: 12px 8px 0;
  border-top: 1px solid var(--color-link-water);
  font-size: 13px;
}

.docs-nav-foot-link {
  color: var(--color-mirage-70);
  text-decoration: none;
}

.docs-nav-foot-link:hover {
  color: var(--color-mirage);
}

/* Try-it response panel (components/_try_it): the docs-try-it controller
   fills and shows the <code class="language-json"> child; the <pre> box
   follows it so the empty frame never shows on its own. */
.docs-tryit-json:has(> code[hidden]) {
  display: none;
}

/* --- article chrome ------------------------------------------------------- */

.docs-article {
  max-width: 72ch;
}

.docs-article-operation {
  max-width: 80ch;
}

.docs-article-header {
  margin-bottom: 28px;
}

.docs-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.docs-title {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-mirage);
}

.docs-lede {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-mirage-70);
}

.docs-breadcrumbs {
  margin-bottom: 10px;
}

.docs-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--color-muted);
}

.docs-breadcrumb + .docs-breadcrumb::before {
  content: "/";
  margin: 0 4px;
  color: var(--color-mirage-30);
}

.docs-breadcrumb-link {
  color: var(--color-mirage-70);
  text-decoration: none;
}

.docs-breadcrumb-link:hover {
  color: var(--color-primary);
}

.docs-article-footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--color-link-water);
}

.docs-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}

.docs-byline-item {
  display: flex;
  gap: 6px;
}

.docs-byline-item dt {
  font-weight: 500;
  color: var(--color-mirage-70);
}

.docs-byline-item dt::after {
  content: ":";
}

.docs-byline-item dd {
  margin: 0;
}

.docs-byline-md {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}

/* --- table of contents ---------------------------------------------------- */

.docs-toc {
  position: sticky;
  top: 84px;
  max-width: 280px;
  padding-left: 16px;
  border-left: 1px solid var(--color-link-water);
}

.docs-toc-heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.docs-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-toc-item {
  margin: 0;
}

.docs-toc-level-3 {
  padding-left: 12px;
}

.docs-toc-link {
  display: block;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-mirage-70);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -17px;
  padding-left: 15px;
}

.docs-toc-link:hover {
  color: var(--color-mirage);
}

.docs-toc-link.is-active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 500;
}

@media (max-width: 1100px) {
  .docs-toc {
    position: static;
    max-width: none;
  }
}

/* --- changelog list ------------------------------------------------------- */

.docs-changelog-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-changelog-entry {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-link-water);
}

.docs-changelog-date {
  font-size: 13px;
  color: var(--color-muted);
  padding-top: 4px;
}

.docs-changelog-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-mirage);
}

.docs-changelog-title a {
  color: inherit;
}

.docs-changelog-description {
  margin: 0;
  color: var(--color-mirage-70);
}

@media (max-width: 640px) {
  .docs-changelog-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* --- generic ------------------------------------------------------------- */

.docs-link {
  color: var(--color-primary);
  text-decoration: none;
}

.docs-link:hover {
  text-decoration: underline;
}

.docs-missing {
  padding: 12px 16px;
  border: 1px dashed var(--color-token-red);
  border-radius: 8px;
  color: var(--color-token-red-ink);
  font-size: 14px;
}
/*
 * /docs/mcp — the MCP section (S7). Client install cards, the tools table,
 * the worked-session transcript, install pages and tool pages.
 *
 * Motion tokens only (application.css :root --color-*); no hex, no inline
 * styles. Everything is prefixed .docs-mcp- so it cannot collide with the
 * docs engine's base rules (docs/layout, typography, code) or the operator
 * app. Code blocks and method badges are the shared docs components
 * (docs_code -> Docs::Renderer.code_block, docs_method_badge -> .docs-method
 * in reference.css); nothing here restyles them.
 */

.docs-mcp {
  max-width: 880px;
  color: var(--color-mirage-80);
  font-size: 15px;
  line-height: 1.6;
}

.docs-mcp code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--color-mirage-05);
  color: var(--color-mirage);
}

/* The inline-code tint above must not leak into the shared highlighted block. */
.docs-mcp .docs-code code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

/* ---- headings / hero ---------------------------------------------------- */

.docs-mcp-crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--color-muted);
}

.docs-mcp-hero {
  margin-bottom: 32px;
}

.docs-mcp-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.docs-mcp-h1 {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-mirage);
}

.docs-mcp-h1--mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  font-weight: 600;
}

.docs-mcp-h2 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-mirage);
}

.docs-mcp-lead {
  margin: 0;
  font-size: 16px;
}

.docs-mcp-section {
  margin: 36px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--color-link-water);
}

.docs-mcp-section > p {
  margin: 0 0 14px;
}

.docs-mcp-list {
  margin: 0;
  padding-left: 20px;
}

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

.docs-mcp-list--tools {
  columns: 2;
  column-gap: 24px;
  list-style: none;
  padding-left: 0;
}

/* ---- client cards ------------------------------------------------------- */

.docs-mcp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.docs-mcp-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--color-link-water);
  border-radius: 10px;
  background: var(--color-white);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.docs-mcp-card:hover,
.docs-mcp-card:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  outline: none;
}

.docs-mcp-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-mirage);
}

.docs-mcp-card-desc {
  font-size: 13px;
  line-height: 1.5;
}

.docs-mcp-card-cta {
  margin-top: auto;
  padding-top: 6px;
  font-size: 13px;
  font-weight: 500;
}

/* ---- tools table / argument table --------------------------------------- */

.docs-mcp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-link-water);
  border-radius: 10px;
  background: var(--color-white);
}

.docs-mcp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.docs-mcp-table th,
.docs-mcp-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-link-water);
}

.docs-mcp-table th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-mirage-70);
  background: var(--color-app-bg);
}

.docs-mcp-table tbody tr:last-child td {
  border-bottom: 0;
}

.docs-mcp-table tbody tr:nth-child(even) td {
  background: var(--color-gray-05);
}

.docs-mcp-table-desc {
  min-width: 260px;
}

.docs-mcp-tool-link {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.docs-mcp-tool-link:hover {
  text-decoration: underline;
}

.docs-mcp-op {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.docs-mcp-op:hover code {
  text-decoration: underline;
}

.docs-mcp-required {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-token-red-ink);
}

.docs-mcp-enum {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-mirage-70);
}

.docs-mcp-tool-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}

.docs-mcp-scope {
  font-size: 12px;
}

/* ---- callouts ----------------------------------------------------------- */

.docs-mcp-callouts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

/* ---- worked-session transcript ------------------------------------------ */

.docs-mcp-transcript {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.docs-mcp-turn {
  position: relative;
  padding: 12px 16px 12px 20px;
  border: 1px solid var(--color-link-water);
  border-radius: 10px;
  background: var(--color-white);
}

.docs-mcp-turn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background: var(--color-mirage-30);
}

.docs-mcp-turn--user::before      { background: var(--color-primary); }
.docs-mcp-turn--assistant::before { background: var(--color-token-green); }
.docs-mcp-turn--tool::before      { background: var(--color-token-yellow); }

.docs-mcp-turn--tool {
  background: var(--color-app-bg);
}

.docs-mcp-turn p {
  margin: 0;
}

.docs-mcp-turn-label {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-mirage-70);
}

.docs-mcp-turn-tool {
  margin-bottom: 8px;
}

.docs-mcp-turn .docs-code-block {
  margin-bottom: 10px;
}

.docs-mcp-turn .docs-code-block:last-child {
  margin-bottom: 0;
}

/* ---- install component -------------------------------------------------- */

.docs-mcp-install {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--color-link-water);
  border-radius: 12px;
  background: var(--color-white);
}

.docs-mcp-install--compact {
  padding: 16px;
}

.docs-mcp-install-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.docs-mcp-install-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-mirage);
}

.docs-mcp-install-more {
  font-size: 13px;
  white-space: nowrap;
}

.docs-mcp-install-note {
  margin: 0;
  font-size: 14px;
}

.docs-mcp-steps {
  margin: 0 0 16px;
  padding-left: 22px;
}

.docs-mcp-steps li + li {
  margin-top: 8px;
}

.docs-mcp-deeplinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.docs-mcp-deeplink-hint {
  font-size: 13px;
}

/* The one-hour docs key warning under the one-click install (QA DEF-10). */
.docs-mcp-key-note {
  margin: 0 0 16px;
}

.docs-mcp-notes {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--color-app-bg);
  font-size: 14px;
}

.docs-mcp-notes-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-mirage);
}

.docs-mcp-notes ul {
  margin: 0;
  padding-left: 18px;
}

.docs-mcp-notes li + li {
  margin-top: 6px;
}

/* ---- per-client nav on install pages ------------------------------------ */

.docs-mcp-clientnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.docs-mcp-clientnav-link {
  padding: 5px 12px;
  border: 1px solid var(--color-link-water);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-mirage-70);
  text-decoration: none;
  background: var(--color-white);
}

.docs-mcp-clientnav-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.docs-mcp-clientnav-link.is-current {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

@media (max-width: 720px) {
  .docs-mcp-h1 { font-size: 26px; }
  .docs-mcp-list--tools { columns: 1; }
  .docs-mcp-install-head { flex-direction: column; align-items: flex-start; }
}
/* Docs (S3): private mode — the key bar chip, key slot states, the
   Try-it console, and the test-identities table. Motion tokens only. */

/* The console and the bars toggle whole subtrees with the hidden attribute;
   make sure no display rule below can win over it. */
.docs-keybar [hidden],
.docs-tryit [hidden],
.docs-mcp-deeplinks [hidden] {
  display: none !important;
}

/* --- key bar row (under the topbar, every reader) ------------------------ */

/* One fixed-height row for every reader. Signed out it holds the sign-in
   links, signed in the key; swapping one for the other never changes its
   height, so the page below does not move when /docs/session.json answers
   (the layout shift QA DEF-06's strip introduced). Not sticky: it scrolls
   away with the page. */
.docs-keybar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  height: 45px;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-link-water);
  background: var(--color-app-bg);
}

.docs-keybar-anon,
.docs-keybar-key {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.docs-keybar-hint {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--color-mirage-70);
}

.docs-keybar-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
}

.docs-keybar-manage-short {
  display: none;
}

/* "Sign in" and "Manage keys": at least a 24x24 target (WCAG 2.5.8). */
.docs-session-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mirage-70);
  text-decoration: none;
  white-space: nowrap;
}

.docs-session-link:hover {
  color: var(--color-primary);
}

.docs-session-signup {
  white-space: nowrap;
}

/* --- key bar (under the topbar, signed in) -------------------------------- */

.docs-session-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  height: 34px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--color-link-water);
  border-radius: 9999px;
  background: var(--color-white);
}

.docs-session-chip-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

.docs-session-chip-value {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--color-mirage);
}

/* Signed in with no key: the headline takes the value's place (QA DEF-09).
   It stays on one line so the row keeps its height; the full reason is also
   in the countdown slot. */
.docs-session-chip-none {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-mirage-80);
  white-space: nowrap;
}

.docs-session-chip-btn {
  appearance: none;
  padding: 3px 9px;
  border: 1px solid var(--color-link-water);
  border-radius: 9999px;
  background: var(--color-white);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mirage-70);
  cursor: pointer;
  white-space: nowrap;
}

.docs-session-chip-btn:hover:not(:disabled) {
  color: var(--color-mirage);
  border-color: var(--color-mirage-30);
}

.docs-session-chip-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.docs-session-chip-btn:disabled {
  color: var(--color-disabled);
  cursor: default;
}

.docs-session-chip-btn[aria-pressed="true"] {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.docs-session-chip-btn.is-copied {
  color: var(--color-token-green-ink);
  border-color: var(--color-token-green);
  background: var(--color-secondary-token-green-light);
}

/* The countdown, or why there is no key: a reason may wrap on a phone. */
.docs-session-expiry {
  font-size: 12px;
  color: var(--color-muted);
}

.docs-session-expiry:empty {
  display: none;
}

/* --- key slot states ------------------------------------------------------- */

/* The base .docs-key / .is-hydrated look is in code.css (S2). Revealed keys
   read as plain code so a screenshot makes the exposure obvious. */
.docs-key.is-hydrated.is-revealed {
  color: var(--color-mirage);
  border-bottom-color: var(--color-token-yellow);
  background: var(--color-secondary-token-yellow-light);
}

/* Signed in with no key: YOUR_API_KEY, marked as a stand-in rather than a
   value (its title says why there is no key). */
.docs-key.is-missing {
  color: var(--color-muted);
  font-style: italic;
  border-bottom-color: var(--color-mirage-30);
}

/* --- Try-it console ------------------------------------------------------- */

.docs-tryit {
  margin: 0 0 20px;
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  background: var(--color-white);
  overflow: hidden;
  /* Clear the 61px sticky topbar when a load scrolls the console into view. */
  scroll-margin-top: 80px;
}

.docs-tryit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-link-water);
  background: var(--color-app-bg);
}

.docs-tryit-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-mirage);
}

.docs-tryit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.docs-tryit-path {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--color-mirage-70);
  word-break: break-all;
}

.docs-tryit-anon {
  padding: 14px;
}

.docs-tryit-anon-text {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-mirage-70);
}

.docs-tryit-form {
  padding: 14px;
}

.docs-tryit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 12px;
  margin: 0 0 12px;
}

.docs-tryit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0 0 12px;
}

.docs-tryit-fields .docs-tryit-field {
  margin: 0;
}

.docs-tryit-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-mirage);
}

.docs-tryit-label code {
  font-size: 12px;
}

.docs-tryit-label-hint {
  margin-left: 4px;
  font-weight: 400;
  color: var(--color-muted);
}

/* The Motion form fields are sized for operator forms; the console sits in
   a 420px rail, so trim them. */
.docs-tryit .docs-tryit-input {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}

.docs-tryit-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.docs-tryit .docs-tryit-body {
  width: 100%;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-mirage);
  tab-size: 2;
  resize: vertical;
}

/* Focus and error borders. application.css styles every bare field:
   `input[type="text"]:focus` (0,2,1) and `select:not(…):not(…):focus` (0,3,1)
   paint Tailwind blue over the Motion `.form-field-*:focus` rules (0,2,0), and
   over the error border of a field docs-try-it#markInvalid flagged, which
   turned red only on blur (walk finding). These carry (0,4,0): the Motion
   focus ring on a valid field, the error border with a red ring on an
   invalid one, focused or not. */
.docs-tryit .docs-tryit-input:not([aria-invalid="true"]):focus,
.docs-tryit .docs-tryit-body:not([aria-invalid="true"]):focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.docs-tryit .docs-tryit-input[aria-invalid="true"],
.docs-tryit .docs-tryit-body[aria-invalid="true"] {
  border-color: var(--color-token-red);
}

.docs-tryit .docs-tryit-input[aria-invalid="true"]:focus,
.docs-tryit .docs-tryit-body[aria-invalid="true"]:focus {
  outline: none;
  border-color: var(--color-token-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-token-red) 10%, transparent);
}

.docs-tryit-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.docs-tryit-inline .docs-tryit-input {
  flex: 1;
  min-width: 0;
}

.docs-tryit-hint,
.docs-tryit-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-muted);
}

.docs-tryit-hint code,
.docs-tryit-note code {
  font-size: 11.5px;
}

.docs-tryit-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-left: 3px solid var(--color-token-yellow);
  border-radius: 0 6px 6px 0;
  background: var(--color-secondary-token-yellow-light);
  color: var(--color-token-yellow-ink);
}

.docs-tryit-confirm-actions {
  margin-top: 10px;
}

.docs-tryit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.docs-tryit-sending {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-link-water);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: docs-tryit-spin 0.8s linear infinite;
}

@keyframes docs-tryit-spin {
  to { transform: rotate(360deg); }
}

/* --- response panel ------------------------------------------------------- */

.docs-tryit-response {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--color-link-water);
  background: var(--color-app-bg);
}

.docs-tryit-status {
  margin: 0 0 8px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-mirage);
}

.docs-tryit-status.is-ok {
  color: var(--color-token-green-ink);
}

.docs-tryit-status.is-error {
  color: var(--color-token-red-ink);
}

.docs-tryit-headers {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 10px;
  margin: 0 0 8px;
  font-size: 12px;
}

.docs-tryit-headers dt {
  color: var(--color-muted);
}

.docs-tryit-headers dd {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--color-mirage-80);
  word-break: break-all;
}

.docs-tryit-error {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--color-token-red);
  border-radius: 0 6px 6px 0;
  background: var(--color-secondary-token-red-light);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-token-red-ink);
}

.docs-tryit-error.is-info {
  border-left-color: var(--color-link-water);
  background: var(--color-app-bg);
  color: var(--color-mirage-80);
}

.docs-tryit-error .docs-link {
  color: var(--color-token-red-ink);
  text-decoration: underline;
}

/* Status timeline: one dot per distinct status the poll loop saw. */
.docs-tryit-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.docs-tryit-timeline-item {
  position: relative;
  padding-left: 14px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--color-mirage-70);
}

.docs-tryit-timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-mirage-30);
}

.docs-tryit-timeline-pending::before { background: var(--color-primary); }
.docs-tryit-timeline-ok::before      { background: var(--color-token-green); }
.docs-tryit-timeline-warn::before    { background: var(--color-token-yellow); }
.docs-tryit-timeline-error::before   { background: var(--color-token-red); }

.docs-tryit-timeline-item.is-terminal {
  color: var(--color-mirage);
  font-weight: 600;
}

.docs-tryit-timeline-item.is-muted {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--color-muted);
}

.docs-tryit-json {
  max-height: 420px;
  margin: 0 0 8px;
  overflow: auto;
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  background: var(--color-white);
  font-size: 12.5px;
  white-space: pre;
}

.docs-tryit-json:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.docs-json-key  { color: var(--color-mirage); font-weight: 500; }
.docs-json-str  { color: var(--color-token-green-ink); }
.docs-json-num  { color: var(--color-token-purple-ink); }
.docs-json-bool { color: var(--color-primary); }

.docs-tryit-links {
  margin: 0;
  font-size: 13px;
  color: var(--color-mirage-70);
}

.docs-tryit-artifacts {
  color: var(--color-mirage-70);
}

/* --- test identities ------------------------------------------------------ */

.docs-identities {
  margin: 0 0 24px;
}

.docs-identities-table td {
  vertical-align: top;
}

.docs-identities-table code {
  white-space: nowrap;
}

.docs-identities-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.docs-identities-load {
  white-space: nowrap;
}

.docs-identities-note {
  margin: 12px 0 8px;
  font-size: 14px;
  color: var(--color-mirage-70);
}

/* Under 768px the signed-in row needs two lines, so the row is two fixed
   lines for every reader: key chip over countdown and Manage keys, or the
   hint over the sign-in links. */
@media (max-width: 767px) {
  .docs-keybar {
    justify-content: flex-start;
    height: 83px;
  }

  .docs-keybar-anon,
  .docs-keybar-key {
    display: grid;
    grid-template-rows: 34px 34px;
    row-gap: 4px;
    align-items: center;
    width: 100%;
  }

  .docs-keybar-key {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
  }

  .docs-keybar-key .docs-session-chip {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .docs-keybar-manage {
    grid-column: 2;
    grid-row: 2;
  }

  /* Two lines fit the 34px track: a no-key reason (QA DEF-09, DEF-18)
     wraps instead of losing its second half. */
  .docs-session-expiry {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 16px;
  }

  .docs-keybar-actions {
    justify-self: start;
  }
}

/* Phones: the chip (key, Reveal, Copy) keeps one line of its own; the
   label shortens to "Key" and, below 360px, is read out but not shown. */
@media (max-width: 480px) {
  .docs-keybar {
    padding: 0 16px;
  }

  .docs-session-chip {
    gap: 6px;
    padding: 0 4px 0 10px;
  }

  .docs-session-chip-label-long {
    display: none;
  }
}

/* Narrow phones: the hint drops its second half (the full text needs about
   337px of row, which a 375px screen has). */
@media (max-width: 374px) {
  .docs-keybar-hint-long {
    display: none;
  }
}

@media (max-width: 360px) {
  /* "Keys" leaves the no-key reason room for its two lines. */
  .docs-keybar-manage-long {
    display: none;
  }

  .docs-keybar-manage-short {
    display: inline;
  }

  .docs-session-chip-label {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
}
/* Docs (S2): API reference pages — method badges, scope pills, operation
   signature, parameter and schema tables, response accordions, the
   reference index list. */

/* --- method badge --------------------------------------------------------- */

.docs-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.docs-method-sm {
  min-width: 48px;
  padding: 2px 6px;
  font-size: 11px;
}

.docs-method-get    { background: var(--color-secondary-token-green-light);  color: var(--color-token-green-ink); }
.docs-method-post   { background: var(--color-primary-light);                color: var(--color-primary); }
.docs-method-put,
.docs-method-patch  { background: var(--color-secondary-token-yellow-light); color: var(--color-token-yellow-ink); }
.docs-method-delete { background: var(--color-secondary-token-red-light);    color: var(--color-token-red-ink); }
.docs-method-other  { background: var(--color-mirage-05);                    color: var(--color-mirage-70); }

/* --- operation header ----------------------------------------------------- */

.docs-operation-signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  background: var(--color-app-bg);
}

.docs-operation-path {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mirage);
  word-break: break-all;
}

.docs-path-param {
  color: var(--color-primary);
}

.docs-operation-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
}

.docs-scope,
.docs-fact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.docs-scope {
  background: var(--color-mirage-05);
  color: var(--color-mirage);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}

.docs-fact {
  border: 1px solid var(--color-link-water);
  color: var(--color-mirage-70);
  text-decoration: none;
}

.docs-fact-warn {
  border-color: var(--color-token-yellow);
  color: var(--color-token-yellow-ink);
}

.docs-fact-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.docs-fact code {
  font-size: 11px;
}

.docs-operation-description {
  margin-bottom: 8px;
}

.docs-operation-note,
.docs-operation-meta {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--color-mirage-70);
}

/* --- parameter tables ----------------------------------------------------- */

.docs-params td:first-child {
  white-space: nowrap;
}

.docs-params-type {
  font-size: 13px;
  color: var(--color-mirage-70);
  white-space: nowrap;
}

.docs-params-example {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-muted);
}

/* --- schema tree ---------------------------------------------------------- */

.docs-schema {
  margin: 0 0 20px;
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  overflow: hidden;
}

.docs-schema .docs-schema {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-link-water);
  border-radius: 0;
}

.docs-schema-caption {
  margin: 0;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-app-bg);
  border-bottom: 1px solid var(--color-link-water);
}

.docs-schema-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-schema-row + .docs-schema-row {
  border-top: 1px solid var(--color-link-water);
}

.docs-schema-field,
.docs-schema-summary {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 14px;
  font-size: 14px;
}

.docs-schema-summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-left: 30px;
}

.docs-schema-summary::-webkit-details-marker {
  display: none;
}

.docs-schema-summary::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 17px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--color-mirage-60);
  border-bottom: 1.5px solid var(--color-mirage-60);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.docs-schema-nested[open] > .docs-schema-summary::before {
  transform: rotate(45deg);
}

.docs-schema-summary:hover {
  background: var(--color-app-bg);
}

.docs-schema-name {
  grid-row: 1;
  font-weight: 500;
}

.docs-schema-type {
  grid-row: 1;
  font-size: 13px;
  color: var(--color-mirage-70);
}

.docs-schema-ref {
  color: var(--color-primary);
  text-decoration: none;
}

.docs-schema-ref:hover {
  text-decoration: underline;
}

.docs-schema-required {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-token-red-ink);
}

.docs-schema-desc {
  grid-column: 1 / -1;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-mirage-70);
}

.docs-schema-enum {
  display: block;
  margin-top: 2px;
}

.docs-schema-enum code {
  margin-right: 2px;
}

.docs-schema .docs-schema .docs-schema-field,
.docs-schema .docs-schema .docs-schema-summary {
  padding-left: 28px;
}

.docs-schema .docs-schema .docs-schema-summary {
  padding-left: 44px;
}

.docs-schema .docs-schema .docs-schema-summary::before {
  left: 27px;
}

/* First line of an opened nested row: the link to the referenced schema,
   which cannot sit inside the <summary> (components/_schema). */
.docs-schema-ref-line {
  margin: 0;
  padding: 0 14px 8px 30px;
  font-size: 13px;
  color: var(--color-mirage-70);
}

.docs-schema .docs-schema .docs-schema-ref-line {
  padding-left: 44px;
}

.docs-schema-ref-line .docs-schema-ref {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- responses ------------------------------------------------------------ */

.docs-responses {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  overflow: hidden;
}

.docs-response + .docs-response {
  border-top: 1px solid var(--color-link-water);
}

.docs-response-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}

.docs-response-summary::-webkit-details-marker {
  display: none;
}

.docs-response-summary:hover {
  background: var(--color-app-bg);
}

.docs-response-description {
  flex: 1;
  min-width: 200px;
  color: var(--color-mirage-80);
}

.docs-response-type {
  font-size: 12px;
  color: var(--color-muted);
}

.docs-response-body {
  padding: 4px 14px 14px;
}

.docs-response-body > .docs-schema,
.docs-response-body > .docs-code-block {
  margin-bottom: 12px;
}

.docs-status {
  display: inline-flex;
  align-items: center;
  min-width: 40px;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
}

.docs-status-2xx   { background: var(--color-secondary-token-green-light);  color: var(--color-token-green-ink); }
.docs-status-4xx   { background: var(--color-secondary-token-yellow-light); color: var(--color-token-yellow-ink); }
.docs-status-5xx   { background: var(--color-secondary-token-red-light);    color: var(--color-token-red-ink); }
.docs-status-other { background: var(--color-mirage-05);                    color: var(--color-mirage-70); }

/* --- reference index ------------------------------------------------------ */

.docs-ref-group {
  margin: 0 0 28px;
  scroll-margin-top: 80px;
}

.docs-ref-group-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-mirage);
}

.docs-ref-group-desc {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--color-mirage-70);
}

.docs-ref-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  overflow: hidden;
}

.docs-ref-item + .docs-ref-item {
  border-top: 1px solid var(--color-link-water);
}

.docs-ref-link {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas: "method path" "method summary";
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
}

.docs-ref-link:hover {
  background: var(--color-app-bg);
}

.docs-ref-link .docs-method {
  grid-area: method;
  align-self: start;
}

.docs-ref-path {
  grid-area: path;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--color-mirage);
}

.docs-ref-summary {
  grid-area: summary;
  font-size: 13px;
  color: var(--color-mirage-70);
}

.docs-schema-index {
  columns: 2;
  margin: 0 0 20px;
  padding-left: 20px;
  font-size: 14px;
}

.docs-events td:first-child {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .docs-ref-link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "method" "path" "summary";
  }

  .docs-schema-index {
    columns: 1;
  }
}
/* Docs (S4): the topbar search input + typeahead listbox, the full results
   page, and the <mark> highlight. Motion tokens only. */

/* --- topbar input ---------------------------------------------------------- */

.docs-search {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  width: 260px;
  min-width: 160px;
  max-width: 100%;
  margin: 0;
}

.docs-search-icon {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--color-muted);
  pointer-events: none;
}

.docs-search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  background: var(--color-app-bg);
  font: inherit;
  font-size: 14px;
  color: var(--color-mirage);
  appearance: none;
  -webkit-appearance: none;
}

.docs-search-input::placeholder {
  color: var(--color-muted);
}

.docs-search-input::-webkit-search-decoration,
.docs-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.docs-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* --- typeahead listbox ------------------------------------------------------- */

.docs-search-listbox {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: min(520px, calc(100vh - 90px));
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--color-link-water);
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: 0 12px 32px rgba(13, 18, 45, 0.14);
}

.docs-search-option {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.docs-search-option.is-active {
  background: var(--color-primary-light);
}

.docs-search-option-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
}

.docs-search-option-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mirage);
}

.docs-search-option-section {
  font-size: 13px;
  color: var(--color-mirage-70);
}

.docs-search-option-section::before {
  content: "›";
  margin-right: 6px;
  color: var(--color-mirage-30);
}

.docs-search-option-kind {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

.docs-search-option-snippet {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-mirage-70);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.docs-search-empty-option {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--color-muted);
}

/* --- highlight ------------------------------------------------------------- */

.docs-search-option-snippet mark,
.docs-search-result-snippet mark {
  padding: 0 1px;
  border-radius: 2px;
  background: var(--color-secondary-token-yellow-light);
  color: var(--color-mirage);
  font-weight: 500;
}

/* --- results page ------------------------------------------------------------ */

.docs-search-page-form {
  display: flex;
  gap: 8px;
  margin: 0 0 24px;
}

.docs-search-page-input {
  flex: 1;
  min-width: 0;
}

.docs-search-page-submit {
  flex-shrink: 0;
}

.docs-search-hint,
.docs-search-empty,
.docs-search-count {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--color-mirage-70);
}

.docs-search-group {
  margin: 0 0 28px;
}

.docs-search-group-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.docs-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-search-result {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-link-water);
}

.docs-search-result:last-child {
  border-bottom: 0;
}

.docs-search-result-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  text-decoration: none;
}

.docs-search-result-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-primary);
}

.docs-search-result-link:hover .docs-search-result-title {
  text-decoration: underline;
}

.docs-search-result-section {
  font-size: 13px;
  color: var(--color-mirage-70);
}

.docs-search-result-section::before {
  content: "›";
  margin-right: 6px;
  color: var(--color-mirage-30);
}

.docs-search-result-snippet {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-mirage-80);
}

/* --- responsive --------------------------------------------------------------- */

@media (max-width: 1100px) {
  .docs-search {
    width: 200px;
  }

  .docs-search-listbox {
    width: 360px;
  }
}

@media (max-width: 640px) {
  .docs-search {
    flex: none;
    width: 40px;
    min-width: 0;
  }

  /* Collapsed to the icon while empty (the placeholder is hidden, never the
     typed value); a field that holds a query stays expanded after blur so
     the reader can see what Enter will search for. */
  .docs-search-input {
    padding-left: 30px;
  }

  .docs-search-input::placeholder {
    color: transparent;
  }

  /* Expanded over the topbar row, pinned to the viewport: anchored to the
     icon's own box it ran off the left edge whenever "Sign in" sat to its
     right (QA DEF-06). The topbar is sticky at top 0, so 12px centres the
     36px field in its 60px row. */
  .docs-search-input:focus,
  .docs-search-input:not(:placeholder-shown) {
    position: fixed;
    top: 12px;
    left: 16px;
    right: 16px;
    width: auto;
    padding-left: 12px;
  }

  .docs-search-listbox {
    position: fixed;
    top: 66px;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }

  .docs-search-input:focus::placeholder {
    color: var(--color-muted);
  }

  .docs-search-page-form {
    flex-direction: column;
  }
}
/* Docs (S2): prose typography for rendered markdown (.docs-prose), plus the
   callout, tabs and steps components. */

/* Inter for the docs surface, without the late swap (QA DEF-17).
   application.css registers Inter (/fonts/inter-variable.woff2, 352 KB) with
   font-display: swap. On a cold load the file lands after the first paint,
   the page is first set in the platform's sans-serif and re-wraps when Inter
   swaps in, and every line after the first re-wrapped one moves: CLS 0.09 to
   0.1 on concept and operation pages (QA, Lighthouse desktop), 0.057 here
   on the trigger page with the font held back 1.5 s. A size-adjusted Arial
   fallback only brought that to 0.048 (inline code shifts the rest of each
   line), so the docs use the same file under their own family name with
   font-display: optional: the layout preloads it, so Chrome waits up to
   ~100 ms for it and otherwise keeps the system font for that page; it
   never swaps after paint. The file is cached for a year
   (StaticCacheHeaders), so the next full page load renders in Inter. A
   separate name, not a second 'Inter' face: faces of one family stack, and
   a missed optional face would fall through to the swap one. */
@font-face {
  font-family: 'Inter Docs';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/inter-variable.woff2) format('woff2');
}

.docs-prose {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-mirage-80);
}

.docs-prose > :first-child {
  margin-top: 0;
}

.docs-prose h2,
.docs-section-title {
  margin: 40px 0 12px;
  padding-top: 8px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-mirage);
  scroll-margin-top: 80px;
}

.docs-prose h3,
.docs-step-title {
  margin: 28px 0 8px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-mirage);
  scroll-margin-top: 80px;
}

/* comrak's header_ids extension appends an empty anchor to each heading;
   show it as a "#" on hover so section links are discoverable. */
.docs-prose h2 .anchor,
.docs-prose h3 .anchor {
  margin-left: 8px;
  color: var(--color-mirage-30);
  text-decoration: none;
  opacity: 0;
}

.docs-prose h2 .anchor::after,
.docs-prose h3 .anchor::after {
  content: "#";
}

.docs-prose h2:hover .anchor,
.docs-prose h3:hover .anchor,
.docs-prose .anchor:focus-visible {
  opacity: 1;
}

.docs-prose h4 {
  margin: 20px 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-mirage);
}

.docs-prose p {
  margin: 0 0 14px;
}

.docs-prose a {
  color: var(--color-primary);
  text-decoration: none;
}

.docs-prose a:hover {
  text-decoration: underline;
}

/* In-text links (QA DEF-12, WCAG 1.4.1 "use of color"): a link inside a
   sentence must differ from the words around it by more than colour, so
   it always carries an underline. Markdown links have no class; .docs-link
   is the templates' in-text link; .docs-related lists a link and its
   description on one line. Links that stand alone (nav, buttons, cards,
   table code links, headings) keep their own styles. */
.docs-prose a:not([class]),
.docs-link,
.docs-prose .docs-link,
.docs-related a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.docs-prose a:not([class]):hover,
.docs-link:hover,
.docs-prose .docs-link:hover,
.docs-related a:hover {
  text-decoration-thickness: 2px;
}

.docs-table-wrap:focus-visible,
.docs-mcp-table-wrap:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.docs-changelog-title .docs-link,
.docs-prose .docs-changelog-title .docs-link {
  text-decoration: none;
}

.docs-changelog-title .docs-link:hover {
  text-decoration: underline;
}

.docs-prose ul,
.docs-prose ol {
  margin: 0 0 14px;
  padding-left: 24px;
}

.docs-prose li {
  margin: 4px 0;
}

.docs-prose li > p {
  margin-bottom: 6px;
}

.docs-prose ul.contains-task-list {
  list-style: none;
  padding-left: 4px;
}

.docs-prose blockquote {
  margin: 0 0 14px;
  padding: 4px 16px;
  border-left: 3px solid var(--color-link-water);
  color: var(--color-mirage-70);
}

.docs-prose hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--color-link-water);
}

.docs-prose strong {
  color: var(--color-mirage);
  font-weight: 600;
}

.docs-prose img {
  max-width: 100%;
  border-radius: 8px;
}

.docs-prose .footnotes {
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px solid var(--color-link-water);
  font-size: 13px;
  color: var(--color-mirage-70);
}

/* Inline code, everywhere on the surface. */
.docs-body code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
}

.docs-prose code,
.docs-schema code,
.docs-table code,
.docs-operation-meta code,
.docs-operation-note code,
.docs-aside-text code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--color-mirage-05);
  color: var(--color-mirage);
}

.docs-prose pre code,
.docs-code code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

/* --- tables --------------------------------------------------------------- */

.docs-table-wrap {
  margin: 0 0 20px;
  overflow-x: auto;
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.docs-table th,
.docs-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-link-water);
}

.docs-table th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-app-bg);
}

.docs-table tbody tr:last-child td {
  border-bottom: 0;
}

.docs-table td p {
  margin: 0;
}

/* --- callouts ------------------------------------------------------------- */

.docs-callout {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
  background: var(--color-primary-light);
  color: var(--color-mirage-80);
}

.docs-callout-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-mirage);
}

.docs-callout-body > :last-child,
.docs-callout > p:last-child {
  margin-bottom: 0;
}

.docs-callout-body p {
  margin: 0 0 8px;
}

.docs-callout-note,
.docs-callout-important {
  border-left-color: var(--color-primary);
  background: var(--color-primary-light);
}

.docs-callout-tip {
  border-left-color: var(--color-token-green);
  background: var(--color-secondary-token-green-light);
}

.docs-callout-tip .docs-callout-title {
  color: var(--color-token-green-ink);
}

.docs-callout-warning {
  border-left-color: var(--color-token-yellow);
  background: var(--color-secondary-token-yellow-light);
}

.docs-callout-warning .docs-callout-title {
  color: var(--color-token-yellow-ink);
}

.docs-callout-danger,
.docs-callout-caution {
  border-left-color: var(--color-token-red);
  background: var(--color-secondary-token-red-light);
}

.docs-callout-danger .docs-callout-title,
.docs-callout-caution .docs-callout-title {
  color: var(--color-token-red-ink);
}

/* --- tabs ----------------------------------------------------------------- */

.docs-tabs {
  margin: 0 0 20px;
}

.docs-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 -1px;
  border-bottom: 1px solid var(--color-link-water);
}

.docs-tab {
  appearance: none;
  padding: 8px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-mirage-70);
  cursor: pointer;
}

.docs-tab:hover {
  color: var(--color-mirage);
}

.docs-tab[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.docs-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: 4px;
}

.docs-tab-panel {
  padding-top: 12px;
}

.docs-tab-panel > .docs-code-block:first-child,
.docs-tab-panel > .docs-prose > :first-child {
  margin-top: 0;
}

.docs-tab-panel > :last-child {
  margin-bottom: 0;
}

/* --- steps ---------------------------------------------------------------- */

.docs-steps {
  margin: 0 0 24px;
}

.docs-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 24px;
}

.docs-step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  border-left: 1px solid var(--color-link-water);
}

.docs-step:last-child::before {
  display: none;
}

.docs-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-mirage);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
}

.docs-step-content {
  min-width: 0;
}

/* Step titles are h2 in the outline, so a step list right under the page
   title does not skip from h1 to h3 (QA DEF-12), but keep the h3 look. */
.docs-step-title,
.docs-prose .docs-step-title {
  margin: 4px 0 8px;
  padding-top: 0;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: normal;
}

.docs-step-body > :last-child {
  margin-bottom: 0;
}

/* --- related / lists ------------------------------------------------------ */

.docs-related {
  margin: 0 0 20px;
  padding-left: 20px;
}

.docs-related-desc {
  color: var(--color-mirage-70);
}
/*
 * Docs surface bundle. Linked ONLY by layouts/docs.html.erb (after
 * application.css, which carries the Motion :root tokens). Never required
 * from application.css — operator pages must not pay for docs styles.
 *
 * Slice-owned sheets live in stylesheets/docs/ and are pulled in below; the
 * base layout/typography/code rules live in this file after the requires.
 * No inline styles anywhere (enforced CSP + spec/requests/content_security_policy_spec.rb).
 *


 */

/* ==========================================================================
   Base: shell, topbar, three-column layout.
   Sidebar 264px | main | aside 420px; single column under 1100px with the
   aside stacking under the main content and the sidebar folding into a
   drawer opened by the topbar toggle (docs-nav controller).
   ========================================================================== */

.docs-body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-mirage-80);
  /* 'Inter Docs': Inter without the late swap (docs/typography.css). */
  font-family: 'Inter Docs', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.docs-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- topbar ------------------------------------------------------------- */

.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 24px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-link-water);
}

/* The left group (toggle, brand, section links) never shrinks: squeezed, it
   wrapped "API reference" onto two lines and slid "Glossary" under the
   search, and on a phone it emptied the menu toggle (QA DEF-06). The right
   group gives way instead: the search narrows to its min-width. */
.docs-topbar-left,
.docs-topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.docs-topbar-left {
  flex: none;
}

.docs-topbar-right {
  justify-content: flex-end;
}

.docs-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-mirage);
  font-weight: 600;
  white-space: nowrap;
}

.docs-brand img {
  height: 24px;
  width: auto;
  display: block;
}

.docs-brand-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-mirage-70);
  padding: 2px 8px;
  border: 1px solid var(--color-link-water);
  border-radius: 6px;
}

.docs-topnav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}

.docs-topnav-link {
  display: inline-block;
  padding: 6px 10px;
  white-space: nowrap;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mirage-70);
  text-decoration: none;
}

.docs-topnav-link:hover {
  color: var(--color-mirage);
  background: var(--color-mirage-05);
}

/* A fixed 36x36 box with fixed 18px bars. As a shrinkable flex item the
   button collapsed to its padding (18px wide), which left the bars 0px wide
   and the button an empty box (QA DEF-06). */
.docs-nav-toggle {
  display: none;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-link-water);
  border-radius: 8px;
  background: var(--color-white);
  cursor: pointer;
}

.docs-nav-toggle span {
  display: block;
  flex: none;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-mirage);
}

.docs-nav-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- layout grid --------------------------------------------------------- */

.docs-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 420px;
  flex: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* Pages that put nothing in the right rail collapse to two columns. */
.docs-layout:not(:has(.docs-aside > *)) {
  grid-template-columns: 264px minmax(0, 1fr);
}

.docs-layout:not(:has(.docs-aside > *)) .docs-aside {
  display: none;
}

.docs-sidebar {
  position: sticky;
  top: 60px;
  align-self: start;
  height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 24px 16px 40px 24px;
  border-right: 1px solid var(--color-link-water);
  background: var(--color-white);
}

.docs-main {
  min-width: 0;
  padding: 40px 48px 80px;
}

.docs-main:focus {
  outline: none;
}

.docs-aside {
  min-width: 0;
  padding: 40px 24px 80px 0;
}

.docs-aside-sticky {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-right: 4px;
}

.docs-aside-section {
  min-width: 0;
}

.docs-aside-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.docs-aside-text {
  margin: 8px 0;
  font-size: 13px;
  color: var(--color-mirage-70);
}

.docs-aside-text code {
  font-size: 12px;
}

.docs-aside-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.docs-btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
  .docs-layout,
  .docs-layout:not(:has(.docs-aside > *)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-nav-toggle {
    display: flex;
  }

  .docs-topnav {
    display: none;
  }

  .docs-sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 30;
    width: 288px;
    max-width: 85vw;
    height: auto;
    transform: translateX(-100%);
    /* Closed drawer: out of the tab order and the accessibility tree (the
       docs-nav controller also sets inert/aria-hidden under this
       breakpoint). Visibility flips to hidden only after the slide-out. */
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
    box-shadow: none;
  }

  .docs-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
    /* Show immediately, then slide in — open() focuses the first link
       synchronously and a still-hidden element would refuse focus. */
    transition: transform 0.2s ease;
    box-shadow: 0 12px 32px rgba(13, 18, 45, 0.16);
  }

  .docs-main {
    padding: 28px 20px 48px;
  }

  .docs-aside {
    padding: 0 20px 64px;
    border-top: 1px solid var(--color-link-water);
  }

  /* Prose + changelog pages: the aside holds only "On this page", which is
     useless after the article — put it first (the sidebar is fixed here, so
     the aside becomes the first in-flow grid item). Code / Try-it asides
     wrap their content in .docs-aside-sticky and keep stacking under the
     article. */
  .docs-layout:has(.docs-aside > .docs-toc) .docs-aside {
    order: -1;
    padding: 0 20px;
    border-top: 0;
    border-bottom: 1px solid var(--color-link-water);
  }

  .docs-aside-sticky {
    position: static;
    max-height: none;
    padding-top: 28px;
  }
}

/* Phones: the topbar row is toggle + brand + search icon (+ "Sign in" when
   signed out) and must fit 320px with no sideways scroll (QA DEF-06):
   tighter gutters and gaps, a smaller logo, and below 400px the "Docs"
   label goes (the link keeps its aria-label). */
@media (max-width: 480px) {
  .docs-topbar {
    gap: 8px;
    padding: 0 16px;
  }

  .docs-topbar-left,
  .docs-topbar-right {
    gap: 8px;
  }

  .docs-brand {
    gap: 8px;
  }

  .docs-brand img {
    height: 18px;
  }
}

@media (max-width: 400px) {
  .docs-brand-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-sidebar,
  .docs-sidebar.is-open {
    transition: none;
  }
}