/* The public developer pages (/developers/mcp, /mods/, /api/client/v1/docs): the keygrip.ai
   look, mirrored from marketing/src/styles/global.css — its nav, footer, type scale and prose
   column — so a page a client's engineer opens from keygrip.ai reads as the same site. Scoped
   under .kg-public: these pages share keygrip.css with the signed-in app, which keeps its own
   chrome. Tokens only (docs/style-guide.md); fonts come from keygrip.css. */

/* min-width 0: keygrip.css makes <body> a flex row, so this item would otherwise grow to its
   widest <pre> line or nowrap nav link and the page scrolls sideways on a phone. */
.kg-public {
  display: flex; flex-direction: column; min-height: 100vh; width: 100%; min-width: 0; max-width: 100%;
  font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--kg-grey);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.kg-pub-main { flex: 1 0 auto; }
.kg-pub-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px, 3vw, 32px); }

/* --- type: the marketing scale (global.css h1/h2/h3, .kg-lead, .kg-eyebrow) --- */
.kg-public h1, .kg-public h2, .kg-public h3 { font-family: var(--kg-serif); color: var(--kg-ink); margin: 0 0 0.5rem; text-wrap: balance; }
.kg-public h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); font-weight: 400; line-height: 1.04; letter-spacing: -0.015em; max-width: 18ch; overflow-wrap: break-word; }
.kg-public h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; margin: 2.5rem 0 20px; }
.kg-public h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 500; line-height: 1.2; margin: 1.5rem 0 12px; }
.kg-public .kg-pub-eyebrow { font-family: var(--kg-sans); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; font-weight: 500; color: var(--kg-grey); margin: 0 0 18px; }
.kg-public .kg-pub-lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--kg-grey); max-width: 46ch; margin: 24px 0 0; text-wrap: pretty; }
.kg-public p { margin: 0 0 1rem; text-wrap: pretty; }
.kg-public strong { color: var(--kg-ink); font-weight: 600; }
.kg-public code { background: var(--kg-surface); border: 1px solid var(--kg-line); color: var(--kg-ink); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.88em; }
/* A code block is ink with light text, as on keygrip.ai (.kg-prose pre). */
.kg-public .kg-code { background: var(--kg-ink); color: var(--kg-surface); border: 0; border-radius: 10px; padding: 1rem 1.25rem; margin: 0.5rem 0 1.25rem; font-size: 0.86rem; line-height: 1.6; }
.kg-public .kg-code-inline { font-size: 0.9em; }
/* Links are ink and underlined (marketing GUIDELINES.md 4.1); nav, footer, buttons and the
   contents column are visibly something else and opt out. */
.kg-public a { color: var(--kg-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.kg-public a:hover { color: var(--kg-ink); text-decoration-thickness: 2px; }
.kg-public .kg-pub-nav a, .kg-public .kg-pub-footer a, .kg-public .kg-pub-btn, .kg-public .kg-btn, .kg-public .kg-dev-toc a, .kg-public .kg-dev-tool h3 a { text-decoration: none; }
.kg-public :focus-visible { outline: 2px solid var(--kg-ink); outline-offset: 3px; border-radius: 4px; }
.kg-public ul, .kg-public ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.kg-public li { margin: 0.35rem 0; text-wrap: pretty; }
.kg-public .kg-muted { color: var(--kg-grey); }
/* The copy button beside a code block: the keygrip.ai accent button geometry, small. */
.kg-public .kg-btn.kg-btn-sm { font-weight: 500; border-color: var(--kg-cyan); padding: 0.35rem 0.8rem; border-radius: 8px; vertical-align: middle; margin-left: 0.4rem; }
.kg-public .kg-btn.kg-btn-sm:hover { background: color-mix(in srgb, var(--kg-cyan) 16%, transparent); border-color: var(--kg-cyan); }

/* --- nav: keygrip.ai's sticky bar (global.css .kg-nav) --- */
/* top: --kg-topbar, not 0 — the dev and impersonation bars (keygrip.css) are position:fixed at
   the viewport top, so a nav sticking at 0 slides underneath them on the first scroll. */
.kg-pub-nav { position: sticky; top: var(--kg-topbar, 0px); z-index: 100; background: color-mix(in srgb, var(--kg-canvas) 85%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--kg-line); }
.kg-pub-nav-inner { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.kg-pub-brand { font-family: var(--kg-serif); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--kg-ink); }
.kg-pub-nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; margin-right: 16px; }
.kg-pub-nav-links a { color: var(--kg-grey); font-size: 0.95rem; font-weight: 600; transition: color 0.15s ease; white-space: nowrap; }
.kg-pub-nav-links a:hover, .kg-pub-nav-links a[aria-current="page"] { color: var(--kg-ink); }
.kg-pub-nav-cta { display: flex; align-items: center; }
.kg-pub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--kg-sans); font-weight: 500; font-size: 0.95rem; line-height: 1; padding: 14px 22px; border-radius: 8px; border: 1px solid var(--kg-cyan); color: var(--kg-ink); background: transparent; white-space: nowrap; transition: background 0.18s ease; }
.kg-pub-btn:hover { background: color-mix(in srgb, var(--kg-cyan) 16%, transparent); }
/* Narrow: the three doc links drop under the wordmark; the Contact button goes first. */
@media (max-width: 720px) {
  .kg-pub-nav-inner { flex-wrap: wrap; gap: 8px 24px; padding-top: 14px; padding-bottom: 14px; }
  .kg-pub-nav-cta { margin-left: auto; order: 2; }
  .kg-pub-nav-links { order: 3; width: 100%; margin: 0; gap: 20px; overflow-x: auto; }
}
/* Anchors land below the sticky bar (68px + 1px, plus any fixed top bar); the contents column
   sits under it too. */
.kg-public [id] { scroll-margin-top: calc(92px + var(--kg-topbar, 0px)); }
@media (max-width: 720px) { .kg-public [id] { scroll-margin-top: calc(130px + var(--kg-topbar, 0px)); } }

/* --- sections: the text hero and the prose section (global.css .kg-page-text-hero, .kg-page-section) --- */
.kg-pub-hero { padding: clamp(48px, 7vw, 96px) 0; }
.kg-pub-divider { border: 0; border-top: 1px solid var(--kg-line); margin: 0; }
.kg-pub-section { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 128px); }
.kg-pub-section > .kg-pub-wrap > :first-child, .kg-pub-section > .kg-pub-wrap > div > :first-child { margin-top: 0; }
.kg-pub-prose { max-width: 44rem; }
/* The mods page: a prose column beside its contents, headings as keygrip.ai sets them. */
.kg-pub-prose h2 { margin-top: 2.5rem; }
.kg-pub-prose > h2:first-child { margin-top: 0; }

/* --- footer (global.css .kg-footer) --- */
.kg-pub-footer { background: var(--kg-surface); border-top: 1px solid var(--kg-line); padding: 46px 0 30px; }
.kg-pub-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.kg-pub-footer-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.kg-pub-footer-links a { color: var(--kg-grey); font-size: 0.92rem; display: inline-block; padding: 10px 0; }
.kg-pub-footer-links a:hover { color: var(--kg-ink); }
.kg-pub-footer-meta { color: var(--kg-grey); font-size: 0.85rem; }
.kg-pub-footer-rule { border: 0; border-top: 1px solid var(--kg-line); margin: 32px 0 0; }

/* --- the developer reference (developers.css lays it out; this sets its type) --- */
/* 15px, not the 17px marketing body: this is a reference read beside a terminal, and at 17px
   it read as oversized (Jeff, 2026-10-23). The contents column and tables are rem-sized. */
.kg-public .kg-dev-layout { gap: 2.5rem 3rem; font-size: 15px; }
@media (min-width: 900px) { .kg-public .kg-dev-toc { top: calc(92px + var(--kg-topbar, 0px)); max-height: calc(100vh - 110px - var(--kg-topbar, 0px)); } }
.kg-public .kg-dev-toc { font-size: 0.9rem; }
.kg-public .kg-dev-toc ul { padding: 0; margin: 0; }
.kg-public .kg-dev-toc li { margin: 0.3rem 0; }
.kg-public .kg-dev-toc ul ul { padding-left: 0.9rem; }
.kg-public .kg-dev-toc-label { margin: 0 0 0.5rem; }
.kg-public .kg-dev-toc-tools .kg-dev-toc-label { margin-top: 1.5rem; }
.kg-public .kg-dev-toc code { background: none; border: 0; padding: 0; color: inherit; font-size: 0.82rem; }
.kg-public .kg-dev-toc a:hover { text-decoration: underline; }
.kg-public .kg-dev-section + .kg-dev-section { margin-top: 3.5rem; }
.kg-public .kg-dev-section > h2:first-child { margin-top: 0; }
.kg-public .kg-dev-section p, .kg-public .kg-dev-section li { max-width: 64ch; }
.kg-public .kg-dev-tool { padding: 1.25rem 1.5rem; margin: 1.25rem 0; }
.kg-public .kg-dev-tool h3 { font-family: var(--kg-sans); font-size: 1.05rem; font-weight: 600; margin: 0 0 0.6rem; }
.kg-public .kg-dev-tool h3 code { background: none; border: 0; padding: 0; font-size: 1em; }
.kg-public .kg-dev-tool p { margin: 0 0 0.85rem; max-width: none; }
.kg-public .kg-dev-params { font-size: 0.9rem; }
.kg-public .kg-dev-params code { font-size: 0.85em; }

/* --- the reporting API's Swagger console: Keygrip type over swagger-ui.css --- */
.kg-public .kg-pub-swagger { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 128px); }
.kg-public .kg-dev-toc-ops-label { margin-top: 1.5rem; }
.kg-public .swagger-ui, .kg-public .swagger-ui .info .title, .kg-public .swagger-ui .info p, .kg-public .swagger-ui .info li, .kg-public .swagger-ui .info table,
.kg-public .swagger-ui .opblock-tag, .kg-public .swagger-ui .opblock .opblock-summary-description, .kg-public .swagger-ui .opblock-description-wrapper p,
.kg-public .swagger-ui .parameter__name, .kg-public .swagger-ui .parameter__type, .kg-public .swagger-ui .response-col_status, .kg-public .swagger-ui .response-col_description,
.kg-public .swagger-ui .btn, .kg-public .swagger-ui select, .kg-public .swagger-ui input[type=text], .kg-public .swagger-ui .scheme-container, .kg-public .swagger-ui .model-title, .kg-public .swagger-ui .tab li, .kg-public .swagger-ui .renderedMarkdown p { font-family: var(--kg-sans); }
.kg-public .swagger-ui .info .title, .kg-public .swagger-ui .opblock-tag { font-family: var(--kg-serif); font-weight: 400; color: var(--kg-ink); }
/* The hero above already carries the title; Swagger's own (with its version badges) would repeat
   it. The openapi.json link beside it stays, as a small link. */
.kg-public .swagger-ui .info .title { display: none; }
.kg-public .swagger-ui .info hgroup.main { margin: 0 0 1rem; }
.kg-public .swagger-ui .info hgroup.main a { font-size: 0.85rem; }
.kg-public .swagger-ui .info h2 { font-family: var(--kg-serif); font-weight: 400; font-size: 1.5rem; color: var(--kg-ink); margin: 2rem 0 0.75rem; }
.kg-public .swagger-ui .info p, .kg-public .swagger-ui .info li, .kg-public .swagger-ui .info td { color: var(--kg-grey); font-size: 1rem; line-height: 1.6; }
.kg-public .swagger-ui .info a, .kg-public .swagger-ui .info a:hover { color: var(--kg-ink); }
.kg-public .swagger-ui .info code, .kg-public .swagger-ui .renderedMarkdown code { background: var(--kg-surface); border: 1px solid var(--kg-line); color: var(--kg-ink); font-size: 0.88em; }
.kg-public .swagger-ui .info pre { background: var(--kg-ink); color: var(--kg-surface); border-radius: 10px; padding: 1rem 1.25rem; }
.kg-public .swagger-ui .info pre code { background: none; border: 0; color: inherit; }
.kg-public .swagger-ui .information-container { padding-top: 0; }
.kg-public .swagger-ui .wrapper { padding: 0; max-width: none; }
.kg-public .swagger-ui .scheme-container { background: transparent; box-shadow: none; padding: 0 0 1.5rem; }
.kg-public .swagger-ui .btn.authorize { color: var(--kg-ink); border-color: var(--kg-cyan); background: transparent; }
.kg-public .swagger-ui .btn.authorize svg { fill: var(--kg-ink); }
.kg-public .swagger-ui .opblock-tag { font-size: 1.5rem; border-bottom-color: var(--kg-line); }
.kg-public .swagger-ui .opblock { border-radius: 10px; box-shadow: none; }
.kg-public .swagger-ui section.models { border-color: var(--kg-line); border-radius: 10px; }
.kg-public .swagger-ui .opblock .opblock-summary-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }