/* Extracted verbatim from app-apis LCOM.NetCore.Public.Docs/DocsAssets.cs.
   Regenerated whenever that changes, so the combined reference and the per-product guides
   cannot drift apart in appearance. Do not hand-edit — edit DocsAssets and re-extract. */

:root {
    --vp-c-bg: #ffffff;
    --vp-c-bg-soft: #f6f6f7;
    --vp-c-bg-alt: #f6f6f7;
    --vp-c-bg-elv: #ffffff;
    --vp-c-border: #e2e8f0;
    --vp-c-divider: #e2e8f0;
    --vp-c-text-1: #1e293b;
    --vp-c-text-2: #475569;
    --vp-c-text-3: #94a3b8;
    --vp-c-brand-1: #6366f1;
    --vp-c-brand-2: #4f46e5;
    --vp-c-brand-soft: rgba(99, 102, 241, 0.14);
    --vp-c-code-bg: #0f172a;
    --vp-c-code-text: #f8fafc;
    --vp-nav-height: 64px;
    --vp-sidebar-width: 272px;
    --vp-aside-width: 224px;
}

html.dark {
    --vp-c-bg: #1b1b1f;
    --vp-c-bg-soft: #202127;
    --vp-c-bg-alt: #161618;
    --vp-c-bg-elv: #202127;
    --vp-c-border: rgba(82, 82, 89, 0.32);
    --vp-c-divider: rgba(82, 82, 89, 0.32);
    --vp-c-text-1: rgba(255, 255, 255, 0.87);
    --vp-c-text-2: rgba(235, 235, 245, 0.6);
    --vp-c-text-3: rgba(235, 235, 245, 0.38);
    --vp-c-brand-1: #818cf8;
    --vp-c-brand-2: #6366f1;
    --vp-c-brand-soft: rgba(129, 140, 248, 0.16);
    --vp-c-code-bg: #161618;
    --vp-c-code-text: #e2e8f0;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--vp-c-bg);
    color: var(--vp-c-text-1);
    line-height: 1.7;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

.vp-nav {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--vp-nav-height);
    background-color: var(--vp-c-bg);
    border-bottom: 1px solid var(--vp-c-border);
    z-index: 1000; display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; backdrop-filter: blur(8px); gap: 12px;
}

/* flex: none, because the bar is a flex row and everything in it is shrinkable by
   default. Left to shrink, the wordmark wrapped onto a second and third line and stood
   taller than the 64px bar it lives in. */
.vp-nav-logo {
    display: flex; align-items: center; gap: 12px; flex: none;
    text-decoration: none; color: var(--vp-c-text-1); font-weight: 700; font-size: 16px;
    white-space: nowrap;
}

.vp-logo-icon {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #6366f1, #10b981);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    color: #ffffff; font-weight: 800; font-size: 16px;
}

/* nowrap: these are a small fixed set, and wrapping put the environment badge on a second
   row 37px down, outside a bar that is only 64px tall. The row that yields is the jump
   links, below - not this one. */
.nav-right {
    display: flex; align-items: center; gap: 8px; flex: none;
    flex-wrap: nowrap; justify-content: flex-end;
}

.env-badge {
    background: var(--vp-c-brand-soft); color: var(--vp-c-brand-1);
    border: 1px solid var(--vp-c-brand-1); border-radius: 9999px;
    padding: 4px 12px; font-size: 12px; font-weight: 600;
    white-space: nowrap;
}

/* ---- jump links across the top (OLNZ-1724) ------------------------------------------ */

.vp-nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0 0 0 24px;
    padding: 0;
}

.vp-nav-link {
    color: var(--vp-c-text-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.vp-nav-link:hover, .vp-nav-link.active {
    color: var(--vp-c-brand-1);
}

/* The nav holds identity, jump links, search and three buttons. Below a wide desktop the
   jump links are the first thing to go: the sidebar carries the same destinations, so
   nothing becomes unreachable. */
@media (max-width: 1200px) {
    .vp-nav-links { display: none; }
}

/* ---- search, theme and the AI export (OLNZ-1724) ------------------------------------ */

/* A basis rather than flex: 1. Growing from zero, the box only ever got the scraps the
   jump links left it - about 112px - and its own label wrapped onto two lines inside a
   64px bar. It now asks for a usable width and gives ground from there. */
.vp-search-trigger {
    display: flex; align-items: center; gap: 10px;
    flex: 0 1 260px; min-width: 0; margin: 0 8px;
    padding: 6px 12px; font: inherit; font-size: 13px;
    color: var(--vp-c-text-3); cursor: pointer; text-align: left;
    background: var(--vp-c-bg-soft);
    border: 1px solid var(--vp-c-border); border-radius: 8px;
}
.vp-search-trigger:hover { border-color: var(--vp-c-brand-1); color: var(--vp-c-text-2); }
/* The label is a hint, not content: it truncates rather than wrapping the bar taller. */
.vp-search-trigger span {
    flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vp-search-trigger kbd {
    font-family: inherit; font-size: 11px; padding: 1px 6px;
    border: 1px solid var(--vp-c-border); border-radius: 4px; color: var(--vp-c-text-3);
}

.vp-icon-btn {
    font: inherit; font-size: 12px; font-weight: 600;
    padding: 5px 10px; cursor: pointer; white-space: nowrap;
    color: var(--vp-c-text-2); background: var(--vp-c-bg-soft);
    border: 1px solid var(--vp-c-border); border-radius: 8px;
}
.vp-icon-btn:hover { color: var(--vp-c-brand-1); border-color: var(--vp-c-brand-1); }

.vp-search-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 0, 0, 0.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh;
}
.vp-search-overlay[hidden] { display: none; }
.vp-search-panel {
    width: min(640px, 92vw);
    background: var(--vp-c-bg-elv);
    border: 1px solid var(--vp-c-border); border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); overflow: hidden;
}
.vp-search-input {
    width: 100%; font: inherit; font-size: 16px; padding: 16px 18px;
    color: var(--vp-c-text-1); background: transparent;
    border: 0; border-bottom: 1px solid var(--vp-c-border); outline: none;
}
.vp-search-results { max-height: 56vh; overflow-y: auto; }
.vp-search-empty { padding: 18px; color: var(--vp-c-text-3); font-size: 14px; }
.vp-search-hit {
    display: block; padding: 10px 18px; text-decoration: none;
    border-bottom: 1px solid var(--vp-c-divider);
}
.vp-search-hit:last-child { border-bottom: 0; }
.vp-search-hit:hover, .vp-search-hit.active { background: var(--vp-c-bg-soft); }
.vp-search-hit-title { color: var(--vp-c-text-1); font-size: 14px; font-weight: 600; }
.vp-search-hit-sub {
    color: var(--vp-c-text-3); font-size: 12px; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vp-search-hit mark {
    background: var(--vp-c-brand-soft); color: var(--vp-c-brand-1); padding: 0 2px;
}

/* The nav is tight on a laptop once search is in it; the guide drops extras before it
   drops the search box, since that is the one that replaces scrolling. */
@media (max-width: 1100px) {
    #targetHostBadge { display: none; }
}
@media (max-width: 860px) {
    .vp-search-trigger kbd, #docsCopyMd, #docsDownloadMd { display: none; }
}

/* On a phone the wordmark is the last thing to go, and the reason is vertical rather than
   horizontal: the bar itself fits once inline code can wrap, but the product name has no
   room to sit on one line beside the search box, so it wrapped to three lines and stood
   82px tall inside a 64px bar. Nothing is lost by dropping it - the logo tile still links
   home, and the product name is the page heading directly below. The narrower padding
   gives the search box back the room the wordmark was taking. */
@media (max-width: 600px) {
    .vp-nav { padding: 0 16px; }
    .vp-nav-logo span { display: none; }
}

.env-badge.muted {
    border-color: var(--vp-c-border); color: var(--vp-c-text-2);
    background: var(--vp-c-bg-soft);
}

.layout-container {
    display: flex; margin-top: var(--vp-nav-height); min-height: calc(100vh - var(--vp-nav-height));
}

.vp-sidebar {
    width: var(--vp-sidebar-width);
    background: var(--vp-c-bg);
    border-right: 1px solid var(--vp-c-border);
    position: fixed; top: var(--vp-nav-height); bottom: 0; left: 0;
    overflow-y: auto; padding: 24px 16px;
}

.sidebar-group-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    color: var(--vp-c-text-3); letter-spacing: 0.05em; margin: 16px 0 8px 8px;
}

.sidebar-link {
    display: block; padding: 6px 12px; color: var(--vp-c-text-2);
    text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 500;
    transition: all 0.15s ease; margin-bottom: 2px;
}

.sidebar-link:hover, .sidebar-link.active {
    color: var(--vp-c-brand-1); background: var(--vp-c-bg-soft);
}

/* min-width matters here as much as max-width. A flex item will not shrink below the
   intrinsic width of its content, and the code samples are far wider than the column, so
   without this the column stayed pinned at its 1100px maximum and, with the sidebar beside
   it, demanded 1372px - handing a horizontal scrollbar to every laptop narrower than that.
   Zero lets it shrink to the room available; the samples and tables already scroll inside
   themselves, which is where that overflow belongs. */
/* The outline down the right-hand side. It earns the band beside the content column,
   which is capped at 1100px and so left the rest of a wide window blank.

   Shown only from 1280px up: below that the window is better spent on the prose, and the
   sidebar already carries every destination the outline does. */
.vp-aside {
    display: none; flex: none; width: var(--vp-aside-width);
    position: sticky; top: calc(var(--vp-nav-height) + 40px);
    height: calc(100vh - var(--vp-nav-height) - 80px);
    overflow-y: auto; padding: 0 16px;
}

@media (min-width: 1280px) {
    .vp-aside { display: block; }
}

.aside-title {
    font-size: 12px; font-weight: 700; color: var(--vp-c-text-1);
    letter-spacing: 0.4px; margin-bottom: 12px;
}

.aside-link {
    display: block; font-size: 12px; color: var(--vp-c-text-2); text-decoration: none;
    padding: 4px 0 4px 12px; margin-left: -12px;
    border-left: 2px solid transparent; transition: all 0.15s ease;
    overflow-wrap: anywhere;
}

.aside-link:hover, .aside-link.active {
    color: var(--vp-c-brand-1); border-left-color: var(--vp-c-brand-1);
}

/* The search box sits beside the wordmark and the jump links hold the far end, so the bar
   reads identity - find - go, and the links line up over the outline they lead to.

   This row is also the one that gives way when the bar runs out of space: it shrinks and
   scrolls within itself rather than pushing anything onto a second line. Nothing becomes
   unreachable - the sidebar and the outline both carry every destination it offers. */
.vp-nav-links {
    margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.vp-nav-links::-webkit-scrollbar { display: none; }
.vp-content {
    margin-left: var(--vp-sidebar-width); flex: 1; padding: 40px 60px; max-width: 1100px;
    min-width: 0;
}

h1 { font-size: 32px; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.02em; scroll-margin-top: calc(var(--vp-nav-height) + 20px); }
h2 { font-size: 22px; font-weight: 700; margin: 36px 0 16px; border-bottom: 1px solid var(--vp-c-border); padding-bottom: 8px; scroll-margin-top: calc(var(--vp-nav-height) + 20px); }
h3 { font-size: 17px; font-weight: 600; margin: 24px 0 12px; scroll-margin-top: calc(var(--vp-nav-height) + 20px); }

p { margin-bottom: 16px; color: var(--vp-c-text-2); }

.callout {
    background: var(--vp-c-bg-soft); border-left: 4px solid var(--vp-c-brand-1);
    border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 20px 0;
}

.callout-title { font-weight: 700; color: var(--vp-c-brand-1); margin-bottom: 6px; font-size: 14px; }

/* Security warnings: a secret-key example that looks like every other callout gets skimmed past. */
.callout-danger { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.06); }
.callout-danger .callout-title { color: #b91c1c; }
html.dark .callout-danger { border-left-color: #f87171; background: rgba(248, 113, 113, 0.10); }
html.dark .callout-danger .callout-title { color: #fca5a5; }

.callout-warn { border-left-color: #d97706; background: rgba(217, 119, 6, 0.06); }
.callout-warn .callout-title { color: #b45309; }
html.dark .callout-warn { border-left-color: #fbbf24; background: rgba(251, 191, 36, 0.10); }
html.dark .callout-warn .callout-title { color: #fcd34d; }

/* Inline code is host names, header names and paths - single tokens with nothing to wrap
   at, routinely wider than a phone. They were the largest cause of the page scrolling
   sideways on a phone, and because a fixed nav is sized against the widened page, they
   dragged the top bar out with them. `anywhere` rather than `break-word`: only `anywhere`
   lowers the intrinsic minimum, which is what the enclosing boxes size themselves from.
   Inert inside pre, which does not wrap at all. */
code {
    font-family: 'Fira Code', monospace; font-size: 13.5px;
    background: var(--vp-c-bg-soft); color: var(--vp-c-brand-1);
    padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere;
}

pre {
    background: var(--vp-c-code-bg); color: var(--vp-c-code-text);
    padding: 16px 20px; border-radius: 8px; font-family: 'Fira Code', monospace;
    font-size: 13.5px; overflow-x: auto; margin: 16px 0; border: 1px solid var(--vp-c-border);
}

.method-tag {
    display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px;
    border-radius: 4px; text-transform: uppercase; margin-right: 8px;
}
.method-post { background: #dcfce7; color: #15803d; }
.method-get { background: #dbeafe; color: #1d4ed8; }
.method-put { background: #ede9fe; color: #6d28d9; }
.method-patch { background: #fef3c7; color: #b45309; }
.method-delete { background: #fee2e2; color: #b91c1c; }
html.dark .method-post { background: rgba(34, 197, 94, 0.18); color: #86efac; }
html.dark .method-get { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
html.dark .method-put { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; }
html.dark .method-patch { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
html.dark .method-delete { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }

.endpoint-box {
    background: var(--vp-c-bg-elv); border: 1px solid var(--vp-c-border);
    border-radius: 10px; padding: 24px; margin: 24px 0;
}

.endpoint-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
/* A path is a single unbreakable token - no spaces to wrap at - so on a narrow column it
   ran straight out of the box and took the page width with it. `anywhere` (not
   `break-word`) because only `anywhere` lowers the intrinsic minimum, which is the number
   the flex parent sizes itself from. */
.endpoint-path {
    font-family: 'Fira Code', monospace; font-size: 16px; font-weight: 600;
    color: var(--vp-c-text-1); overflow-wrap: anywhere;
}

table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--vp-c-border); font-size: 14px; }
th { font-weight: 700; color: var(--vp-c-text-1); background: var(--vp-c-bg-soft); }

/* Wide tables must scroll inside themselves; the page body never scrolls sideways. */
.table-scroll { overflow-x: auto; margin: 16px 0; }
.table-scroll table { margin: 0; }

.env-active-badge {
    display: inline-block; color: #16a34a; font-weight: 700; font-size: 12px;
}
html.dark .env-active-badge { color: #4ade80; }

.code-tabs {
    border: 1px solid var(--vp-c-border);
    border-radius: 10px; overflow: hidden; margin: 16px 0;
    background: var(--vp-c-code-bg);
}
/* Wraps because the column can now be narrower than this row. .code-tabs clips with
   overflow: hidden, so a row that cannot wrap loses its right-hand end outright - on a
   375px phone that was the Copy button, cut off with no way to scroll to it. Wrapping
   keeps every control reachable; scrolling the row instead would hide them behind an
   invisible scrollbar, and unlike the top nav there is no second route to Copy. */
.code-tabs-bar {
    display: flex; align-items: center; flex-wrap: wrap;
    background: var(--vp-c-bg-elv); border-bottom: 1px solid var(--vp-c-border);
    padding: 0 8px; gap: 0;
}
.code-tab-btn {
    background: none; border: none; cursor: pointer;
    padding: 10px 16px; font-size: 13px; font-weight: 500;
    color: var(--vp-c-text-2); font-family: 'Inter', sans-serif;
    border-bottom: 2px solid transparent; transition: all 0.15s ease;
    margin-bottom: -1px;
}
.code-tab-btn:hover { color: var(--vp-c-text-1); }
.code-tab-btn.active {
    color: var(--vp-c-brand-1); border-bottom-color: var(--vp-c-brand-1);
}
.code-copy-btn {
    margin-left: auto; background: none; border: 1px solid var(--vp-c-border);
    color: var(--vp-c-text-2); padding: 5px 14px; border-radius: 6px;
    cursor: pointer; font-size: 12px; font-weight: 600; font-family: 'Inter', sans-serif;
    transition: all 0.15s ease;
}
.code-copy-btn:hover { background: var(--vp-c-brand-soft); color: var(--vp-c-brand-1); border-color: var(--vp-c-brand-1); }
/* The AI export, restated in the page itself. The two buttons in the top bar are easy to
   miss and are the first things hidden on a narrow window, so the guide says it once in
   the open, near the top, where an integrator is actually looking. Same Markdown and the
   same handlers - it is one export offered twice, not a second implementation. */
.ai-download-panel {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
    border: 1px solid var(--vp-c-brand-1); border-radius: 12px;
    padding: 24px; margin: 32px 0;
}

.ai-download-title {
    font-size: 16px; font-weight: 700; color: var(--vp-c-text-1); margin-bottom: 8px;
}

.ai-download-panel p { font-size: 13px; margin: 0; }

.ai-download-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

.ai-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 8px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600; transition: all 0.2s ease;
}

.ai-btn-primary { background: var(--vp-c-brand-1); color: #ffffff; border: none; }
.ai-btn-primary:hover { background: var(--vp-c-brand-2); }

.ai-btn-secondary {
    background: transparent; color: var(--vp-c-text-1); border: 1px solid var(--vp-c-border);
}
.ai-btn-secondary:hover { border-color: var(--vp-c-brand-1); color: var(--vp-c-brand-1); }
.code-panel {
    display: none; margin: 0;
    background: var(--vp-c-code-bg); color: var(--vp-c-code-text);
    padding: 20px 24px; border-radius: 0; border: none;
    font-family: 'Fira Code', monospace; font-size: 13px;
    overflow-x: auto; line-height: 1.7; white-space: pre;
}
.code-panel.active { display: block; }

@media (max-width: 960px) {
    .vp-sidebar { display: none; }
    .vp-content { margin-left: 0; padding: 24px 20px; }
}