/* Documentation type scale, shared by the Markdown pages, the Starlight SDK docs and the
   Scalar API reference so every portal page reads the same (Scalar's own 14px body). */
.dev {
    --doc-h1: 32px;
    --doc-h2: 24px;
    --doc-h3: 19px;
    --doc-h4: 16px;
    --doc-lead: 16px;
    --doc-body: 14px;
    --doc-table: 13px;
    --doc-code: 13px;
    --doc-lh: 1.65;
    --doc-lh-table: 1.5;
    --doc-lh-heading: 1.25;
}
@media (max-width: 800px) {
    .dev { --doc-h1: 26px; --doc-h2: 21px; --doc-h3: 18px; }
}

/* Developer portal (/developers/). Builds on the --px-* tokens from premium.css. */

.dev main { background: var(--px-bg); }
.dev .px-to-top { display: none; }

/* ---------- Portal bar (logo, breadcrumb, tabs, account) ----------
   Portal pages have no site menu: --px-nav-h drops to 0 and this bar, fixed at the top,
   is the only chrome. On Starlight pages it sits inside Starlight's own fixed header. */
body.px.dev { --px-nav-h: 0px; --ts-bar-h: 64px; }
.dev-bar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 900;
    height: var(--ts-bar-h);
    border-bottom: 1px solid var(--px-border);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(1.4) blur(10px);
}
body.dev:not(.ts-sdk) main#top { padding-top: var(--ts-bar-h); }
.dev-bar-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    padding: 0 32px;
}
.dev-logo {
    display: flex;
    align-items: center;
    flex: none;
    align-self: stretch;
    padding-right: 24px;
    border-right: 1px solid var(--px-border);
}
.dev-logo img { display: block; height: 30px; width: auto; }
.dev-lang {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid var(--px-border);
    border-radius: 999px;
}
.dev-lang button {
    padding: 3px 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: 600 12px var(--px-font);
    color: var(--px-muted);
    cursor: pointer;
}
.dev-lang button:hover { color: var(--px-ink); }
.dev-lang button.is-current { background: var(--px-accent-soft); color: var(--px-ink); }
.dev-crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--px-dim);
    white-space: nowrap;
}
.dev-crumbs a { color: var(--px-text); text-decoration: none; }
.dev-crumbs a:hover { color: var(--px-accent); }
.dev-crumbs-root { display: inline-flex; align-items: center; }
.dev-crumbs-product { color: var(--tint) !important; }

.dev-tabs { display: flex; gap: 4px; align-self: stretch; }
.dev-tabs a {
    display: flex;
    white-space: nowrap;
    align-items: center;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--px-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.dev-tabs a:hover { color: var(--px-ink); }
.dev-tabs a.is-active { color: var(--px-ink); border-bottom-color: var(--px-accent); }

.dev-user { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 14px; }
.dev-user-name { color: var(--px-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-user form { margin: 0; }
.dev-user-out {
    white-space: nowrap;
    padding: 6px 12px;
    border: 1px solid var(--px-border-2, var(--px-border));
    border-radius: 999px;
    background: #fff;
    font: 600 13px var(--px-font);
    color: var(--px-text);
    cursor: pointer;
}
.dev-user-out:hover { border-color: var(--px-accent); color: var(--px-accent); }

/* ---------- Home ---------- */
.dev-hero { padding: 64px 0 24px; }
.dev-hero .px-h1 { font-size: clamp(34px, 4.4vw, 54px); }
.dev-hero .px-lead { max-width: 640px; }

.dev-home { padding-bottom: 112px; }
.dev .dev-home-title {
    margin: 40px 0 18px;
    font-family: var(--px-font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--px-ink);
}
.dev-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.dev-product {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border-radius: var(--px-radius);
    background: #fff;
    border: 1px solid var(--px-border);
    box-shadow: var(--px-shadow-sm);
    color: var(--px-text);
    text-decoration: none;
    transition: transform 0.3s var(--px-ease), box-shadow 0.3s var(--px-ease), border-color 0.3s ease;
}
a.dev-product:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tint) 40%, transparent);
    box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--tint) 55%, transparent);
}
.dev-product.is-soon { opacity: 0.6; }
.dev-product-head { display: flex; align-items: center; gap: 12px; }
.dev-product-head strong { font-family: var(--px-font-display); font-size: 17px; font-weight: 800; color: var(--px-ink); }
.dev-product p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--px-muted); }
.dev-product-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.dev-product-tags span {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: color-mix(in srgb, var(--tint) 75%, #000);
    background: color-mix(in srgb, var(--tint) 9%, #fff);
}
.dev-product-tags span.is-muted { color: var(--px-muted); background: var(--px-bg); }

.dev-guides {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.dev-guides-col { padding: 20px 22px; border-radius: var(--px-radius); background: #fff; border: 1px solid var(--px-border); }
.dev .dev-guides-col h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--px-dim); }
.dev-guides-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.dev-guides-col a { color: var(--px-text); font-weight: 600; text-decoration: none; }
.dev-guides-col a:hover { color: var(--px-accent); }
.dev-empty { padding: 28px; border-radius: var(--px-radius); background: #fff; border: 1px dashed var(--px-border-2, var(--px-border)); color: var(--px-muted); }

/* ---------- Doc layout ---------- */
.dev-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 220px;
    gap: 48px;
    max-width: 1440px;
    padding-top: 56px;
    padding-bottom: 96px;
}
.dev-side, .dev-toc {
    position: sticky;
    top: calc(var(--px-nav-h) + var(--ts-bar-h, 0px) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--px-nav-h) - var(--ts-bar-h, 0px) - 48px);
    overflow-y: auto;
    font-size: 14px;
}
.dev-side-mobile > summary { display: none; }
.dev-side-group + .dev-side-group { margin-top: 22px; }
.dev .dev-side-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--px-dim);
}
.dev-side ul, .dev-toc ul { margin: 0; padding: 0; list-style: none; }
.dev-side a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    margin-left: -12px;
    border-radius: 10px;
    color: var(--px-text);
    text-decoration: none;
    font-weight: 500;
}
.dev-side a:hover { background: #fff; color: var(--px-ink); }
.dev-side a.is-active { background: var(--px-accent-soft); color: var(--px-accent-deep); font-weight: 650; }
.dev-side-api svg { width: 14px; height: 14px; }

.dev-toc ul ul { padding-left: 12px; }
.dev-toc a {
    display: block;
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--px-border);
    color: var(--px-muted);
    text-decoration: none;
    line-height: 1.4;
}
.dev-toc a:hover { color: var(--px-ink); }
.dev-toc a.is-current { color: var(--px-accent); border-left-color: var(--px-accent); }

.dev-article { min-width: 0; max-width: 780px; }
.dev-layout--single { grid-template-columns: minmax(0, 1fr); max-width: 860px; padding-top: 56px; }

.dev-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 40px;
    padding: 22px 24px;
    border-radius: var(--px-radius);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--tint, var(--px-accent)) 28%, transparent);
    box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--tint, var(--px-accent)) 60%, transparent);
    text-decoration: none;
    transition: transform 0.3s var(--px-ease), box-shadow 0.3s var(--px-ease);
}
.dev-cta:hover { transform: translateY(-2px); box-shadow: 0 28px 60px -30px color-mix(in srgb, var(--tint, var(--px-accent)) 70%, transparent); }
.dev-cta-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #fff;
    background: var(--tint, var(--px-accent));
}
.dev-cta-icon svg { width: 22px; height: 22px; }
.dev-cta-copy { display: grid; gap: 4px; flex: 1; min-width: 0; }
.dev-cta-copy strong { font-family: var(--px-font-display); font-size: 18px; font-weight: 800; color: var(--px-ink); }
.dev-cta-copy small { font-size: 14px; line-height: 1.5; color: var(--px-muted); }
.dev-cta-arrow { flex: none; width: 22px; height: 22px; color: var(--tint, var(--px-accent)); }
.dev-article-head { padding-bottom: 22px; margin-bottom: 28px; border-bottom: 1px solid var(--px-border); }
.dev .dev-article-head h1 {
    margin: 0 0 10px;
    font-family: var(--px-font-display);
    font-size: var(--doc-h1);
    font-weight: 800;
    line-height: var(--doc-lh-heading);
    letter-spacing: -0.025em;
    color: var(--px-ink);
}
.dev-article-head p { margin: 0; font-size: var(--doc-lead); line-height: var(--doc-lh); color: var(--px-muted); }

/* ---------- Prose ---------- */
.dev-prose { font-size: var(--doc-body); line-height: var(--doc-lh); color: var(--px-text); }
.dev-prose > * + * { margin-top: 1.1em; }
.dev .dev-prose h2,
.dev .dev-prose h3,
.dev .dev-prose h4 {
    position: relative;
    font-family: var(--px-font-display);
    color: var(--px-ink);
    letter-spacing: -0.02em;
    scroll-margin-top: calc(var(--px-nav-h) + var(--ts-bar-h, 0px) + 24px);
}
.dev .dev-prose h2 { margin-top: 2.2em; font-size: var(--doc-h2); line-height: var(--doc-lh-heading); font-weight: 800; }
.dev .dev-prose h3 { margin-top: 1.8em; font-size: var(--doc-h3); line-height: var(--doc-lh-heading); font-weight: 700; }
.dev .dev-prose h4 { margin-top: 1.5em; font-size: var(--doc-h4); line-height: var(--doc-lh-heading); font-weight: 700; }
.dev-anchor {
    margin-left: 8px;
    color: var(--px-dim);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.dev-prose :is(h2, h3, h4):hover .dev-anchor { opacity: 1; }
.dev-prose a:not(.dev-anchor) { color: var(--px-accent); font-weight: 550; text-underline-offset: 3px; }
.dev-prose ul, .dev-prose ol { padding-left: 1.4em; }
.dev-prose ul { list-style: disc; }
.dev-prose ol { list-style: decimal; }
.dev-prose li + li { margin-top: 0.35em; }
.dev-prose strong { color: var(--px-ink); }
.dev-prose hr { border: 0; border-top: 1px solid var(--px-border); margin: 2.4em 0; }
.dev-prose blockquote { padding-left: 16px; border-left: 3px solid var(--px-accent-line); color: var(--px-muted); }

.dev-prose :not(pre) > code {
    padding: 0.15em 0.4em;
    border-radius: 6px;
    background: color-mix(in srgb, var(--px-accent) 7%, #fff);
    border: 1px solid var(--px-accent-line);
    font-size: 0.875em;
    color: var(--px-accent-deep);
}
.dev-prose code, .dev-prose pre { font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; }

.dev-prose .highlight { position: relative; border-radius: 14px; background: #0d1230; overflow: hidden; }
.dev-prose .highlight pre {
    margin: 0;
    padding: 18px 20px;
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.65;
    color: #e3e7ff;
}
.dev-copy {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #c9cff5;
    font: 600 12px var(--px-font);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.dev-prose .highlight:hover .dev-copy, .dev-copy:focus-visible { opacity: 1; }
.dev-copy.is-done { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.4); }

.dev-table {
    overflow-x: auto;
    border: 1px solid var(--px-border);
    border-radius: 14px;
    background: #fff;
}
.dev-prose table { width: 100%; border-collapse: collapse; font-size: var(--doc-table); line-height: var(--doc-lh-table); }
.dev-prose td:last-child { min-width: 240px; }
.dev-prose td > code:only-child, .dev-prose td:first-child code { white-space: nowrap; }
.dev-prose tr:last-child td { border-bottom: 0; }
.dev-prose th, .dev-prose td { padding: 10px 14px; border-bottom: 1px solid var(--px-border); text-align: left; vertical-align: top; }
.dev-prose th { font-weight: 700; color: var(--px-ink); background: var(--px-bg); white-space: nowrap; }

.dev .admonition {
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid var(--px-accent-line);
    background: var(--px-accent-soft);
    font-size: var(--doc-body);
}
.dev .admonition > * + * { margin-top: 0.5em; }
.dev .admonition-title { margin: 0; font-weight: 700; color: var(--px-ink); }
.dev .admonition.warning { border-color: rgba(217, 119, 6, 0.3); background: #fffbeb; }
.dev .admonition.danger { border-color: rgba(220, 38, 38, 0.3); background: #fef2f2; }
.dev .admonition.tip { border-color: rgba(16, 185, 129, 0.3); background: #ecfdf5; }
.dev-fallback { margin-bottom: 20px; }

.dev-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--px-border);
}
.dev-pager a {
    display: grid;
    gap: 2px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid var(--px-border);
    background: #fff;
    text-decoration: none;
}
.dev-pager a:hover { border-color: var(--px-accent); }
.dev-pager small { font-size: 12px; color: var(--px-dim); }
.dev-pager span { font-size: var(--doc-body); font-weight: 700; color: var(--px-ink); }
.dev-pager-next { text-align: right; grid-column: 2; }

/* ---------- Scalar API reference ---------- */
/* Same look as the Starlight SDK docs: grey canvas, white cards, Inter/Manrope, the
   product colour as accent, navy code. Scalar puts its theme variables on body.light-mode
   (and a nested .dark-mode for request examples), so the overrides target those. */
.dev--api .px-footer { display: none; }
.dev-scalar {
    min-height: calc(100vh - var(--ts-bar-h));
}
body.dev--api,
body.dev--api.light-mode,
body.dev--api .light-mode {
    --scalar-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --scalar-font-code: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
    --scalar-color-1: #0a1033;
    --scalar-color-2: #5b6488;
    --scalar-color-3: #8d94b4;
    --scalar-color-accent: var(--tint, #4434e0);
    --scalar-background-1: #f7f8fc;
    --scalar-background-2: #ffffff;
    --scalar-background-3: #eef0fa;
    --scalar-background-accent: color-mix(in srgb, var(--tint, #4434e0) 9%, #ffffff);
    --scalar-border-color: rgba(10, 16, 51, 0.08);
    --scalar-link-color: color-mix(in srgb, var(--tint, #4434e0) 85%, #000000);
    --scalar-link-color-hover: var(--tint, #4434e0);
    --scalar-button-1: var(--tint, #4434e0);
    --scalar-button-1-hover: color-mix(in srgb, var(--tint, #4434e0) 80%, #000000);
    --scalar-button-1-color: #ffffff;
    --scalar-radius: 10px;
    --scalar-radius-lg: 14px;
    --scalar-radius-xl: 16px;
    --scalar-shadow-1: 0 1px 2px rgba(10, 16, 51, 0.04), 0 6px 16px -8px rgba(10, 16, 51, 0.08);

    --scalar-sidebar-background-1: #f7f8fc;
    --scalar-sidebar-border-color: rgba(10, 16, 51, 0.08);
    --scalar-sidebar-color-1: #1d2449;
    --scalar-sidebar-color-2: #5b6488;
    --scalar-sidebar-color-active: color-mix(in srgb, var(--tint, #4434e0) 72%, #000000);
    --scalar-sidebar-item-hover-background: #ffffff;
    --scalar-sidebar-item-hover-color: #0a1033;
    --scalar-sidebar-item-active-background: color-mix(in srgb, var(--tint, #4434e0) 9%, #ffffff);
    --scalar-sidebar-search-background: #ffffff;
    --scalar-sidebar-search-border-color: rgba(10, 16, 51, 0.14);
    --scalar-sidebar-search-color: #8d94b4;
}
/* Request/response examples: the portal's navy code blocks. */
body.dev--api .dark-mode {
    --scalar-background-1: #0d1230;
    --scalar-background-2: #121a40;
    --scalar-background-3: #1a2350;
    --scalar-border-color: rgba(255, 255, 255, 0.08);
    --scalar-color-1: #e3e7ff;
    --scalar-color-2: #a9b0d6;
    --scalar-color-3: #7b83ad;
}
body.dev--api .dev-scalar { --scalar-custom-header-height: var(--ts-bar-h); }

/* ---- Sidebar: the same measurements as the Starlight sidebar ---- */
body.dev--api {
    --refs-sidebar-width: 280px;
    --scalar-sidebar-padding: 16px;
    --scalar-sidebar-indent: 0px;
    --scalar-sidebar-indent-border: transparent;
    --scalar-sidebar-indent-border-hover: transparent;
    --scalar-sidebar-indent-border-active: transparent;
}
.dev-scalar .t-doc__sidebar { width: 280px; }
.dev-scalar .t-doc__sidebar > div:first-child { padding: 24px 16px 0; }
.dev-scalar .t-doc__sidebar button.bg-sidebar-b-search {
    height: 40px;
    padding: 0 12px;
    gap: 8px;
    border-radius: 12px;
    font: 500 14px var(--scalar-font);
    color: #8d94b4;
}
.dev-scalar .t-doc__sidebar button.bg-sidebar-b-search:hover { border-color: color-mix(in srgb, var(--tint, #4434e0) 35%, transparent); }
.dev-scalar .t-doc__sidebar ul.custom-scroll { padding: 16px 16px 24px; gap: 0; }
.dev-scalar .t-doc__sidebar ul { gap: 0; }

/* Links */
.dev-scalar .t-doc__sidebar a.peer\/button {
    padding: 4.32px 8px;
    border-radius: 10px;
    font-size: 14.4px;
    line-height: 20.16px;
    font-weight: 400;
    color: #1d2449;
}
.dev-scalar .t-doc__sidebar a.peer\/button:hover { background: transparent; color: #0a1033; }
.dev-scalar .t-doc__sidebar a.peer\/button[aria-current="page"] {
    background: color-mix(in srgb, var(--tint, #4434e0) 9%, #ffffff);
    color: color-mix(in srgb, var(--tint, #4434e0) 72%, #000000);
    font-weight: 650;
}

/* Service groups read as Starlight's section labels. */
.dev-scalar .t-doc__sidebar .group\/group-button > a.peer\/button {
    padding: 3.2px 8px;
    font-size: 12px;
    line-height: 16.8px;
    font-weight: 700;
    letter-spacing: 0.84px;
    text-transform: uppercase;
    color: #8d94b4;
}
.dev-scalar .t-doc__sidebar .group\/group-button > a.peer\/button:hover { color: #5b6488; }
.dev-scalar .t-doc__sidebar ul.custom-scroll > li + li { margin-top: 12px; }

/* Scalar's own indent column and branding link; Starlight has neither. */
.dev-scalar .t-doc__sidebar .scalar-sidebar-indent { display: none; }
.dev-scalar .t-doc__sidebar a[href*="scalar.com"] { display: none; }

/* Pages inside a group: indented with a hairline, as in Starlight. */
.dev-scalar .t-doc__sidebar ul.custom-scroll ul > li {
    margin-inline-start: 8px;
    padding-inline-start: 8px;
    border-inline-start: 1px solid rgba(10, 16, 51, 0.08);
}

.dev-scalar :is(h1, h2, h3) {
    font-family: "Manrope", "Inter", sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}
/* The portal's documentation scale (--doc-*, at the top of this file). */
.dev-scalar h1.section-header-label { font-size: var(--doc-h1); line-height: var(--doc-lh-heading); letter-spacing: -0.025em; }
.dev-scalar h2.section-header-label { font-size: var(--doc-h2); line-height: var(--doc-lh-heading); }
.dev-scalar h3.section-header-label { font-size: var(--doc-h3); line-height: var(--doc-lh-heading); }
.dev-scalar h4.section-header-label {
    font-family: "Manrope", "Inter", sans-serif;
    font-size: var(--doc-h4);
    font-weight: 700;
    line-height: var(--doc-lh-heading);
    letter-spacing: -0.02em;
    color: #0a1033;
}
.dev-scalar { --scalar-paragraph: var(--doc-body); }

/* ---------- Account pages ---------- */
.dev-auth {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: calc(var(--px-nav-h) + 48px) 16px 80px;
    overflow: hidden;
    isolation: isolate;
}
.dev-auth-card { position: relative; width: 100%; max-width: 440px; }
.dev .dev-auth-card h2 { margin-top: 10px; }
.dev-auth-card > p { color: var(--px-muted); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.dev-auth-fields { display: grid; gap: 16px; margin-bottom: 22px; }
.dev-auth .px-field input[type="password"],
.dev-auth .px-field input[type="email"],
.dev-auth .px-field input[type="text"] {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--px-border-2, var(--px-border));
    background: var(--px-bg);
    color: var(--px-ink);
    font: 500 15px var(--px-font);
    outline: none;
}
.dev-auth .px-field input:focus { border-color: var(--px-accent); background: #fff; box-shadow: 0 0 0 4px var(--px-accent-soft); }
.dev-auth .px-field ul.errorlist { margin: 0; padding: 0; list-style: none; }
.dev-auth-help { font-size: 12.5px; color: var(--px-muted); }
.dev-auth-help ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; }
.dev-auth-error { margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; background: #fef2f2; color: #b91c1c; font-size: 14px; }
.dev-auth-error p { margin: 0; }
.dev-auth-foot { display: grid; gap: 6px; margin-top: 20px; font-size: 14px; color: var(--px-muted); text-align: center; }
.dev-auth-foot a { color: var(--px-accent); font-weight: 600; text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .dev-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
    .dev-toc { display: none; }
}

@media (max-width: 860px) {
    body.px.dev { --ts-bar-h: 56px; }
    body.px.dev:has(.dev-tabs) { --ts-bar-h: 100px; }
    .dev-bar-inner { flex-wrap: wrap; align-content: center; gap: 0 12px; padding: 8px 16px; }
    .dev-logo { padding-right: 12px; align-self: center; height: 40px; }
    .dev-logo img { height: 24px; }
    .dev-crumbs-root, .dev-crumbs-sep { display: none; }
    .dev-user { gap: 8px; }
    .dev-tabs { order: 3; width: 100%; min-height: 44px; overflow-x: auto; }
    .dev-tabs a { padding: 0 12px 0 0; margin-right: 12px; }
    .dev-user-name { display: none; }
    .dev-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 20px; }
    .dev-side { position: static; max-height: none; overflow: visible; }
    .dev-side-mobile {
        border: 1px solid var(--px-border);
        border-radius: 14px;
        background: #fff;
    }
    .dev-side-mobile > summary {
        display: block;
        padding: 12px 16px;
        font-weight: 700;
        color: var(--px-ink);
        cursor: pointer;
    }
    .dev-side-mobile > nav { padding: 4px 16px 16px 28px; }
    .dev-pager { grid-template-columns: 1fr; }
    .dev-pager-next { grid-column: 1; }
}

/* ---------- Code highlighting (pygments "github-dark"; regenerate with pygmentize -S github-dark -f html -a ".dev-prose .highlight") ---------- */
.dev-prose .highlight .c { color: #8B949E; font-style: italic } /* Comment */
.dev-prose .highlight .err { color: #F85149 } /* Error */
.dev-prose .highlight .esc { color: #E6EDF3 } /* Escape */
.dev-prose .highlight .g { color: #E6EDF3 } /* Generic */
.dev-prose .highlight .k { color: #FF7B72 } /* Keyword */
.dev-prose .highlight .l { color: #A5D6FF } /* Literal */
.dev-prose .highlight .n { color: #E6EDF3 } /* Name */
.dev-prose .highlight .o { color: #FF7B72; font-weight: bold } /* Operator */
.dev-prose .highlight .x { color: #E6EDF3 } /* Other */
.dev-prose .highlight .p { color: #E6EDF3 } /* Punctuation */
.dev-prose .highlight .ch { color: #8B949E; font-style: italic } /* Comment.Hashbang */
.dev-prose .highlight .cm { color: #8B949E; font-style: italic } /* Comment.Multiline */
.dev-prose .highlight .cp { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Preproc */
.dev-prose .highlight .cpf { color: #8B949E; font-style: italic } /* Comment.PreprocFile */
.dev-prose .highlight .c1 { color: #8B949E; font-style: italic } /* Comment.Single */
.dev-prose .highlight .cs { color: #8B949E; font-weight: bold; font-style: italic } /* Comment.Special */
.dev-prose .highlight .gd { color: #FFA198; background-color: #490202 } /* Generic.Deleted */
.dev-prose .highlight .ge { color: #E6EDF3; font-style: italic } /* Generic.Emph */
.dev-prose .highlight .ges { color: #E6EDF3; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.dev-prose .highlight .gr { color: #FFA198 } /* Generic.Error */
.dev-prose .highlight .gh { color: #79C0FF; font-weight: bold } /* Generic.Heading */
.dev-prose .highlight .gi { color: #56D364; background-color: #0F5323 } /* Generic.Inserted */
.dev-prose .highlight .go { color: #8B949E } /* Generic.Output */
.dev-prose .highlight .gp { color: #8B949E } /* Generic.Prompt */
.dev-prose .highlight .gs { color: #E6EDF3; font-weight: bold } /* Generic.Strong */
.dev-prose .highlight .gu { color: #79C0FF } /* Generic.Subheading */
.dev-prose .highlight .gt { color: #FF7B72 } /* Generic.Traceback */
.dev-prose .highlight .g-Underline { color: #E6EDF3; text-decoration: underline } /* Generic.Underline */
.dev-prose .highlight .kc { color: #79C0FF } /* Keyword.Constant */
.dev-prose .highlight .kd { color: #FF7B72 } /* Keyword.Declaration */
.dev-prose .highlight .kn { color: #FF7B72 } /* Keyword.Namespace */
.dev-prose .highlight .kp { color: #79C0FF } /* Keyword.Pseudo */
.dev-prose .highlight .kr { color: #FF7B72 } /* Keyword.Reserved */
.dev-prose .highlight .kt { color: #FF7B72 } /* Keyword.Type */
.dev-prose .highlight .ld { color: #79C0FF } /* Literal.Date */
.dev-prose .highlight .m { color: #A5D6FF } /* Literal.Number */
.dev-prose .highlight .s { color: #A5D6FF } /* Literal.String */
.dev-prose .highlight .na { color: #E6EDF3 } /* Name.Attribute */
.dev-prose .highlight .nb { color: #E6EDF3 } /* Name.Builtin */
.dev-prose .highlight .nc { color: #F0883E; font-weight: bold } /* Name.Class */
.dev-prose .highlight .no { color: #79C0FF; font-weight: bold } /* Name.Constant */
.dev-prose .highlight .nd { color: #D2A8FF; font-weight: bold } /* Name.Decorator */
.dev-prose .highlight .ni { color: #FFA657 } /* Name.Entity */
.dev-prose .highlight .ne { color: #F0883E; font-weight: bold } /* Name.Exception */
.dev-prose .highlight .nf { color: #D2A8FF; font-weight: bold } /* Name.Function */
.dev-prose .highlight .nl { color: #79C0FF; font-weight: bold } /* Name.Label */
.dev-prose .highlight .nn { color: #FF7B72 } /* Name.Namespace */
.dev-prose .highlight .nx { color: #E6EDF3 } /* Name.Other */
.dev-prose .highlight .py { color: #79C0FF } /* Name.Property */
.dev-prose .highlight .nt { color: #7EE787 } /* Name.Tag */
.dev-prose .highlight .nv { color: #79C0FF } /* Name.Variable */
.dev-prose .highlight .ow { color: #FF7B72; font-weight: bold } /* Operator.Word */
.dev-prose .highlight .pm { color: #E6EDF3 } /* Punctuation.Marker */
.dev-prose .highlight .w { color: #6E7681 } /* Text.Whitespace */
.dev-prose .highlight .mb { color: #A5D6FF } /* Literal.Number.Bin */
.dev-prose .highlight .mf { color: #A5D6FF } /* Literal.Number.Float */
.dev-prose .highlight .mh { color: #A5D6FF } /* Literal.Number.Hex */
.dev-prose .highlight .mi { color: #A5D6FF } /* Literal.Number.Integer */
.dev-prose .highlight .mo { color: #A5D6FF } /* Literal.Number.Oct */
.dev-prose .highlight .sa { color: #79C0FF } /* Literal.String.Affix */
.dev-prose .highlight .sb { color: #A5D6FF } /* Literal.String.Backtick */
.dev-prose .highlight .sc { color: #A5D6FF } /* Literal.String.Char */
.dev-prose .highlight .dl { color: #79C0FF } /* Literal.String.Delimiter */
.dev-prose .highlight .sd { color: #A5D6FF } /* Literal.String.Doc */
.dev-prose .highlight .s2 { color: #A5D6FF } /* Literal.String.Double */
.dev-prose .highlight .se { color: #79C0FF } /* Literal.String.Escape */
.dev-prose .highlight .sh { color: #79C0FF } /* Literal.String.Heredoc */
.dev-prose .highlight .si { color: #A5D6FF } /* Literal.String.Interpol */
.dev-prose .highlight .sx { color: #A5D6FF } /* Literal.String.Other */
.dev-prose .highlight .sr { color: #79C0FF } /* Literal.String.Regex */
.dev-prose .highlight .s1 { color: #A5D6FF } /* Literal.String.Single */
.dev-prose .highlight .ss { color: #A5D6FF } /* Literal.String.Symbol */
.dev-prose .highlight .bp { color: #E6EDF3 } /* Name.Builtin.Pseudo */
.dev-prose .highlight .fm { color: #D2A8FF; font-weight: bold } /* Name.Function.Magic */
.dev-prose .highlight .vc { color: #79C0FF } /* Name.Variable.Class */
.dev-prose .highlight .vg { color: #79C0FF } /* Name.Variable.Global */
.dev-prose .highlight .vi { color: #79C0FF } /* Name.Variable.Instance */
.dev-prose .highlight .vm { color: #79C0FF } /* Name.Variable.Magic */
.dev-prose .highlight .il { color: #A5D6FF } /* Literal.Number.Integer.Long */

/* ---------- Product landing (single-page docs sets) ---------- */
/* Re-derive the accent tokens from the product colour; header/footer keep Techsign's. */
.dev-brand {
    --px-accent: var(--tint, #4434e0);
    --px-accent-2: color-mix(in srgb, var(--px-accent) 62%, #ffffff);
    --px-accent-deep: color-mix(in srgb, var(--px-accent) 72%, #000000);
    --px-accent-soft: color-mix(in srgb, var(--px-accent) 7%, #ffffff);
    --px-accent-line: color-mix(in srgb, var(--px-accent) 22%, transparent);
    --px-accent-glow: color-mix(in srgb, var(--px-accent) 40%, transparent);
    --px-violet: color-mix(in srgb, var(--px-accent) 70%, #ffffff);
    --px-cyan: color-mix(in srgb, var(--px-accent) 45%, #ffffff);
    --px-grad: linear-gradient(135deg, var(--px-violet) 0%, var(--px-accent) 50%, var(--px-cyan) 100%);
    --px-grad-text: linear-gradient(100deg, var(--px-ink) 0%, var(--px-accent-deep) 30%, var(--px-accent) 62%, var(--px-violet) 82%, var(--px-cyan) 100%);
}

/* The portal bar already clears the fixed header. */
.dev .dev-landing-top { padding-top: 72px; padding-bottom: 88px; }
.dev-landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 56px;
    align-items: center;
}
.dev-landing-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.dev-landing-brand .px-kicker { margin: 0; }
.dev-landing-hero .px-lead { max-width: 560px; }

.dev-landing-window {
    display: block;
    border-radius: var(--px-radius-lg);
    background: #0d1230;
    box-shadow: 0 50px 100px -40px var(--px-accent-glow), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    overflow: hidden;
    text-decoration: none;
    transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
    transition: transform 0.6s var(--px-ease);
}
.dev-landing-window:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(0); }
.dev-landing-window-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font: 600 12px var(--px-font);
    color: #8f97c8;
}
.dev-landing-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.dev-landing-window-bar span { margin-left: 10px; }
.dev-landing-window-body { display: grid; gap: 12px; padding: 22px 22px 26px; }
.dev-ln { display: flex; align-items: center; gap: 12px; }
.dev-ln b {
    min-width: 58px;
    padding: 4px 0;
    border-radius: 6px;
    font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
}
.dev-ln .m-get { color: #6ee7b7; background: rgba(110, 231, 183, 0.12); }
.dev-ln .m-post { color: color-mix(in srgb, var(--px-accent) 45%, #ffffff); background: color-mix(in srgb, var(--px-accent) 22%, transparent); }
.dev-ln .m-del { color: #fca5a5; background: rgba(252, 165, 165, 0.12); }
.dev-ln em, .dev-code span { display: block; height: 9px; width: 62%; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
.dev-ln em.w2 { width: 48%; }
.dev-ln em.w3 { width: 70%; }
.dev-code { display: grid; gap: 10px; margin-top: 8px; padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.dev-code .w1 { width: 22%; }
.dev-code .w2 { width: 54%; }
.dev-code .w3 { width: 40%; background: color-mix(in srgb, var(--px-accent) 45%, transparent); }
.dev-code .in { margin-left: 18px; }

.dev-landing-section { padding-bottom: 56px; }
.dev-section-head { margin-bottom: 24px; }
.dev .dev-section-head h2 {
    margin: 10px 0 0;
    font-family: var(--px-font-display);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--px-ink);
}
.dev-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.dev-option {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 26px;
    text-decoration: none;
}
.dev-option:hover { transform: translateY(-3px); border-color: var(--px-accent-line); }
.dev-option-copy { display: grid; gap: 6px; flex: 1; min-width: 0; }
.dev-option-copy strong { font-family: var(--px-font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--px-ink); }
.dev-option-copy small { font-size: 14.5px; line-height: 1.55; color: var(--px-muted); }
.dev-option-arrow { flex: none; width: 20px; height: 20px; margin-top: 4px; color: var(--px-accent); transition: transform 0.3s var(--px-ease); }
.dev-option:hover .dev-option-arrow { transform: translateX(4px); }
.dev-landing-last { padding-bottom: 112px; }
.dev-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dev-highlight { padding: 30px; }
.dev .dev-highlight h3 {
    margin: 22px 0 10px;
    font-family: var(--px-font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--px-ink);
}
.dev .dev-highlight p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--px-muted); }
.dev-landing-body { padding: 44px 48px; }
.dev-landing-body .dev-prose > :first-child { margin-top: 0; }

@media (max-width: 1024px) {
    .dev-landing-hero { grid-template-columns: 1fr; gap: 40px; }
    .dev-landing-window { transform: none; max-width: 560px; }
    .dev-highlights { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .dev .dev-landing-top { padding-top: 40px; padding-bottom: 56px; }
    .dev-landing-body { padding: 28px 22px; }
    .dev-landing-section { padding-bottom: 40px; }
    .dev-landing-last { padding-bottom: 72px; }
    .dev-landing-window { display: none; }
}

/* ---------- SDK docs search dialog (Starlight/Pagefind) ----------
   Matches the API reference's Scalar search: a light 540px panel 15vh from the top, a
   borderless 40px input row, flat 10px-rounded result rows with a white active state. */
body.ts-sdk site-search dialog::backdrop {
    background: rgba(0, 0, 0, 0.22);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.ts-sdk site-search dialog {
    border: 0;
    background: #f7f8fc;
    box-shadow: 0 0 0 1px rgba(10, 16, 51, 0.08), 0 24px 60px -20px rgba(10, 16, 51, 0.35);
}
@media (min-width: 50rem) {
    body.ts-sdk site-search dialog {
        margin: 15vh auto auto;
        width: 540px;
        max-width: calc(100% - 32px);
        min-height: 0;
        max-height: 540px;
        border-radius: 14px;
    }
}
body.ts-sdk site-search .dialog-frame { padding: 0; gap: 0; }
body.ts-sdk #starlight__search {
    --pagefind-ui-scale: 1;
    --pagefind-ui-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --pagefind-ui-border-width: 0;
}

/* Input row */
body.ts-sdk #starlight__search .pagefind-ui__form::before {
    top: 12px;
    left: 12px;
    width: 16px;
    height: 16px;
    background-color: #8d94b4;
    opacity: 1;
}
body.ts-sdk #starlight__search .pagefind-ui__search-input {
    height: 40px;
    padding: 0 40px 0 37px !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: 400 16px var(--pagefind-ui-font);
    color: #0a1033;
    outline: none;
}
body.ts-sdk #starlight__search .pagefind-ui__search-input::placeholder { color: #8d94b4; opacity: 1; }
body.ts-sdk #starlight__search .pagefind-ui__search-clear {
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 3px;
}
body.ts-sdk #starlight__search .pagefind-ui__search-clear::before { background-color: #5b6488; -webkit-mask-size: 16px; mask-size: 16px; }
body.ts-sdk #starlight__search .pagefind-ui__search-clear:focus { outline: none; }

/* Results */
body.ts-sdk #starlight__search .pagefind-ui__drawer { gap: 0; }
body.ts-sdk #starlight__search .pagefind-ui__results-area { margin: 0; padding: 0 4px 4px; }
body.ts-sdk #starlight__search .pagefind-ui__message {
    height: auto;
    margin: 0;
    padding: 4px 8px 6px;
    font: 500 12px var(--pagefind-ui-font);
    color: #8d94b4;
}
body.ts-sdk #starlight__search .pagefind-ui__results { padding: 0; }
body.ts-sdk #starlight__search .pagefind-ui__results > * + * { margin-top: 0; }
body.ts-sdk #starlight__search .pagefind-ui__result,
body.ts-sdk #starlight__search .pagefind-ui__result-inner { padding: 0; margin: 0; gap: 0; border: 0; min-width: 0; max-width: 100%; }
/* One-line excerpts are cut with an ellipsis, as Scalar does, instead of overflowing. */
body.ts-sdk #starlight__search .pagefind-ui__result-nested,
body.ts-sdk #starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title { min-width: 0; overflow: hidden; }
body.ts-sdk #starlight__search .pagefind-ui__result-excerpt { display: block; max-width: 100%; }
body.ts-sdk #starlight__search .pagefind-ui__result-inner > :first-child,
body.ts-sdk #starlight__search .pagefind-ui__result-inner > :last-child { border-radius: 10px; }

/* Every row (page or section) looks like a Scalar result row. */
body.ts-sdk #starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title,
body.ts-sdk #starlight__search .pagefind-ui__result-nested {
    margin: 0;
    padding: 6px 8px 6px 33px;
    border-radius: 10px;
    background: transparent;
    outline: none;
}
body.ts-sdk #starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title:hover,
body.ts-sdk #starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title:focus-within,
body.ts-sdk #starlight__search .pagefind-ui__result-nested:hover,
body.ts-sdk #starlight__search .pagefind-ui__result-nested:focus-within {
    background: #ffffff;
    outline: none;
}
body.ts-sdk #starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title::before {
    left: 8px;
    width: 16px;
    background: #8d94b4;
    -webkit-mask-size: 16px;
    mask-size: 16px;
}
/* Scalar shows a flat list: no tree connector lines. */
body.ts-sdk #starlight__search .pagefind-ui__result-nested::before,
body.ts-sdk #starlight__search .pagefind-ui__result-nested::after { display: none; }
body.ts-sdk #starlight__search .pagefind-ui__result-title,
body.ts-sdk #starlight__search .pagefind-ui__result-link {
    font: 500 14px/20px var(--pagefind-ui-font);
    color: #0a1033;
}
body.ts-sdk #starlight__search .pagefind-ui__result-excerpt {
    margin-top: 2px;
    font: 400 14px/20px var(--pagefind-ui-font);
    color: #5b6488;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.ts-sdk #starlight__search .pagefind-ui__result-excerpt mark {
    background: none;
    color: #0a1033;
    font-weight: 600;
}
body.ts-sdk #starlight__search .pagefind-ui__button {
    margin: 4px 0 0;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: 500 13px var(--pagefind-ui-font);
    color: #5b6488;
}
body.ts-sdk #starlight__search .pagefind-ui__button:hover { background: #ffffff; color: #0a1033; }

/* ---------- Starlight SDK docs: same scale as the Markdown pages and the API reference ----------
   Loaded after Starlight's CSS (sdk_docs.py), unlayered, so these win without a rebuild. */
body.ts-sdk {
    --sl-text-h1: var(--doc-h1);
    --sl-text-h2: var(--doc-h2);
    --sl-text-h3: var(--doc-h3);
    --sl-text-h4: var(--doc-h4);
    --sl-text-h5: var(--doc-body);
    --sl-text-body: var(--doc-body);
    --sl-line-height: var(--doc-lh);
    --sl-line-height-headings: var(--doc-lh-heading);
}
body.ts-sdk h1#_top { font-size: var(--doc-h1); line-height: var(--doc-lh-heading); letter-spacing: -0.025em; }
body.ts-sdk .sl-markdown-content { font-size: var(--doc-body); line-height: var(--doc-lh); }
body.ts-sdk .sl-markdown-content h2 { font-size: var(--doc-h2); }
body.ts-sdk .sl-markdown-content h3 { font-size: var(--doc-h3); }
body.ts-sdk .sl-markdown-content h4 { font-size: var(--doc-h4); }
body.ts-sdk .sl-markdown-content :is(h2, h3, h4) { line-height: var(--doc-lh-heading); }
body.ts-sdk .expressive-code { --ec-codeFontSize: var(--doc-code); }
body.ts-sdk .expressive-code pre { font-size: var(--doc-code); }
body.ts-sdk .starlight-aside { font-size: var(--doc-body); }
/* Previous/next: Starlight sizes the page title at --sl-text-2xl; match .dev-pager. */
body.ts-sdk .pagination-links a { padding: 14px 18px; font-size: 12px; line-height: 1.5; color: var(--px-dim); }
body.ts-sdk .pagination-links .link-title { font-size: var(--doc-body); font-weight: 700; color: var(--px-ink); }
body.ts-sdk .pagination-links svg { --sl-icon-size: 18px; }

/* Tables: Starlight zeroes the first and last cells' side padding (it draws no frame);
   inside our framed box that pushed the text against the border. */
body.ts-sdk .sl-markdown-content table { font-size: var(--doc-table); line-height: var(--doc-lh-table); }
body.ts-sdk .sl-markdown-content :is(th, td) {
    padding: 10px 14px;
    border-bottom: 1px solid var(--sl-color-hairline);
    text-align: start;
    vertical-align: top;
}
body.ts-sdk .sl-markdown-content tr:last-child td { border-bottom: 0; }
body.ts-sdk .sl-markdown-content th { font-weight: 700; white-space: nowrap; }
body.ts-sdk .sl-markdown-content td > code:only-child { white-space: nowrap; }
body.ts-sdk .sl-markdown-content td code { font-size: 0.92em; }