/* ==========================================================================
   Localtonet documentation (/documents)
   One stylesheet for the layout (_LayoutDocument), the article template
   (Views/Documents/Index.cshtml), the docs home page and the search dialog.

   Design language follows the homepage: slate + indigo palette, the generic
   "monospace" family for text, the same floating theme switch. The theme is
   read from <html data-theme="light|dark"> (set before first paint by the
   inline script in the layout, same "data-theme" localStorage key as the
   rest of the site). Quiet surfaces, hairline borders, generous spacing:
   colour is kept for links, the current item and status.

   Sections
     1. Tokens            5. Article shell         9. Search dialog
     2. Base              6. Article content      10. Docs home
     3. Top bar           7. Content components   11. Theme switch
     4. Sidebar           8. On this page / pager 12. Footer
                                                  13. Small screens, print
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
    --d-bg: #ffffff;
    --d-bg-soft: #f8fafc;
    --d-bg-mute: #f1f5f9;
    --d-surface: #ffffff;
    --d-border: #e2e8f0;
    --d-border-soft: #edf1f6;
    --d-border-strong: #cbd5e1;
    --d-head: #0f172a;
    --d-text: #334155;
    --d-muted: #5b6b82;
    --d-accent: #4f46e5;
    --d-accent-hover: #4338ca;
    --d-accent-text: #4338ca;
    --d-accent-soft: #eef2ff;
    --d-accent-border: #c7d2fe;
    --d-on-accent: #ffffff;
    --d-glass: rgba(255, 255, 255, .82);
    --d-scrim: rgba(15, 23, 42, .45);
    --d-logo-tile: #f8fafc;
    --d-row-hover: #f8fafc;
    --d-table-edge: rgba(15, 23, 42, .14);

    /* Code blocks follow the theme: a light sheet here, slate in the dark theme. */
    --d-code-bg: #f8fafc;
    --d-code-head: #f1f5f9;
    --d-code-border: #e2e8f0;
    --d-code-text: #1e293b;
    --d-code-muted: #64748b;
    --d-copy-bg: #ffffff;
    --d-copy-border: #dbe2ea;
    --d-copy-text: #334155;
    --d-copy-hover: #eef2ff;
    --d-icode-bg: #f1f5f9;
    --d-icode-border: #e2e8f0;
    --d-icode-text: #3730a3;
    --d-hl-comment: #64748b;
    --d-hl-keyword: #4338ca;
    --d-hl-string: #047857;
    --d-hl-number: #b45309;
    --d-hl-title: #0369a1;
    --d-hl-deletion: #be123c;

    --d-ok: #047857;
    --d-ok-soft: #f0fdf7;
    --d-ok-border: #bbf0d6;
    --d-warn: #92400e;
    --d-warn-soft: #fffbeb;
    --d-warn-border: #fde68a;
    --d-danger: #be123c;
    --d-danger-soft: #fff5f6;
    --d-danger-border: #fecdd3;

    --d-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px -6px rgba(15, 23, 42, .06);
    --d-shadow-hover: 0 2px 4px rgba(15, 23, 42, .04), 0 18px 36px -14px rgba(15, 23, 42, .16);
    --d-shadow-pop: 0 24px 60px rgba(15, 23, 42, .18);
    --d-ring: 0 0 0 3px rgba(79, 70, 229, .3);

    --d-font: monospace;
    --d-font-code: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    --d-top-h: 68px;
    --d-side-w: 276px;
    --d-radius-sm: 8px;
    --d-radius: 12px;
    --d-radius-lg: 18px;
    --d-ease: 180ms cubic-bezier(.2, .7, .3, 1);

    color-scheme: light;
}

[data-theme="dark"] {
    --d-bg: #0f172a;
    --d-bg-soft: #131c31;
    --d-bg-mute: #1a2540;
    --d-surface: #141e34;
    --d-border: #263349;
    --d-border-soft: #1f2b40;
    --d-border-strong: #3b4a66;
    --d-head: #f1f5f9;
    --d-text: #cbd5e1;
    --d-muted: #a3b1c6;
    --d-accent: #4f46e5;
    --d-accent-hover: #6366f1;
    --d-accent-text: #a5b4fc;
    --d-accent-soft: #1f2a4d;
    --d-accent-border: #3b4a7a;
    --d-glass: rgba(15, 23, 42, .8);
    --d-scrim: rgba(2, 6, 23, .66);
    --d-logo-tile: #1c2840;
    --d-row-hover: #172239;
    --d-table-edge: rgba(2, 6, 23, .9);

    --d-code-bg: #0b1222;
    --d-code-head: #111a2e;
    --d-code-border: #233047;
    --d-code-text: #e2e8f0;
    --d-code-muted: #94a3b8;
    --d-copy-bg: #18233a;
    --d-copy-border: #2c3a55;
    --d-copy-text: #cbd5e1;
    --d-copy-hover: #222f4d;
    --d-icode-bg: #1b2740;
    --d-icode-border: #26344f;
    --d-icode-text: #c7d2fe;
    --d-hl-comment: #8b9bb4;
    --d-hl-keyword: #a5b4fc;
    --d-hl-string: #86efac;
    --d-hl-number: #fcd34d;
    --d-hl-title: #7dd3fc;
    --d-hl-deletion: #fda4af;

    --d-ok: #6ee7b7;
    --d-ok-soft: rgba(16, 185, 129, .08);
    --d-ok-border: rgba(16, 185, 129, .28);
    --d-warn: #fcd34d;
    --d-warn-soft: rgba(245, 158, 11, .08);
    --d-warn-border: rgba(245, 158, 11, .3);
    --d-danger: #fda4af;
    --d-danger-soft: rgba(244, 63, 94, .08);
    --d-danger-border: rgba(244, 63, 94, .3);

    --d-shadow: 0 1px 2px rgba(2, 6, 23, .3);
    --d-shadow-hover: 0 18px 40px -16px rgba(2, 6, 23, .7);
    --d-shadow-pop: 0 24px 70px rgba(2, 6, 23, .6);
    --d-ring: 0 0 0 3px rgba(129, 140, 248, .42);

    color-scheme: dark;
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--d-top-h) + 24px);
}

body {
    margin: 0;
    background: var(--d-bg);
    color: var(--d-text);
    font-family: var(--d-font);
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--d-head); font-family: var(--d-font); line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--d-accent-text); text-decoration: none; }
a:hover { color: var(--d-accent-hover); }
[data-theme="dark"] a:hover { color: #c7d2fe; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
kbd, code, pre, samp { font-family: var(--d-font-code); }
[hidden] { display: none !important; }
::selection { background: rgba(99, 102, 241, .22); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--d-accent-text); outline-offset: 2px; border-radius: 4px; }

.docs-ico { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.125em; }
.docs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.docs-skip {
    position: fixed; left: 12px; top: -80px; z-index: 2000;
    padding: 10px 16px; border-radius: var(--d-radius);
    background: var(--d-accent); color: var(--d-on-accent); font-weight: 700;
}
.docs-skip:focus { top: 12px; color: var(--d-on-accent); }

/* 3. Top bar -------------------------------------------------------------- */
.docs-top {
    position: sticky; top: 0; z-index: 900;
    height: var(--d-top-h);
    background: var(--d-glass);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--d-border);
}
.docs-top-in {
    height: 100%; max-width: 1600px; margin: 0 auto; padding: 0 28px;
    display: flex; align-items: center; gap: 18px;
}
.docs-brand { display: inline-flex; align-items: center; flex: none; border-radius: var(--d-radius-sm); }
.docs-brand img { display: block; width: 64px; height: 52px; }
.docs-brand .is-dark, [data-theme="dark"] .docs-brand .is-light { display: none; }
[data-theme="dark"] .docs-brand .is-dark { display: block; }

.docs-iconbtn {
    flex: none; width: 42px; height: 42px; border-radius: var(--d-radius);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--d-head); font-size: 20px;
    transition: background var(--d-ease);
}
.docs-iconbtn:hover { background: var(--d-bg-mute); }
.docs-burger { display: none; margin-left: -8px; }

.docs-search-btn {
    flex: 1 1 auto; max-width: 440px; height: 42px; margin: 0 auto 0 16px; padding: 0 10px 0 14px;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--d-border); border-radius: var(--d-radius);
    background: var(--d-bg-soft); color: var(--d-muted); font-size: 14px; text-align: left;
    transition: border-color var(--d-ease), background var(--d-ease), box-shadow var(--d-ease);
}
.docs-search-btn:hover { border-color: var(--d-border-strong); background: var(--d-surface); }
.docs-search-btn:focus-visible { border-color: var(--d-accent-text); box-shadow: var(--d-ring); outline: none; }
.docs-search-btn .docs-ico { font-size: 17px; }
.docs-search-btn > span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.docs-kbd, .doc-content kbd {
    display: inline-block; padding: 1px 6px; min-width: 22px; text-align: center;
    border: 1px solid var(--d-border-strong); border-bottom-width: 2px; border-radius: 6px;
    background: var(--d-surface); color: var(--d-muted);
    font-family: var(--d-font-code); font-size: 11.5px; line-height: 1.5; white-space: nowrap;
}

.docs-top-nav { display: flex; align-items: center; gap: 4px; flex: none; }
.docs-top-nav a {
    padding: 8px 11px; border-radius: var(--d-radius-sm);
    color: var(--d-head); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    transition: color var(--d-ease);
}
.docs-top-nav a:hover { color: var(--d-accent-text); }
.docs-cta {
    flex: none; height: 40px; padding: 0 18px; border-radius: var(--d-radius);
    display: inline-flex; align-items: center;
    background: rgba(79, 70, 229, .1); color: #4338ca; font-size: 13.5px; font-weight: 700;
    transition: background var(--d-ease), color var(--d-ease);
}
.docs-cta:hover { background: var(--d-accent); color: #fff; }
[data-theme="dark"] .docs-cta { background: rgba(129, 140, 248, .16); color: #c7d2fe; }
[data-theme="dark"] .docs-cta:hover { background: var(--d-accent); color: #fff; }

/* 4. Sidebar -------------------------------------------------------------- */
.docs-shell {
    max-width: 1600px; margin: 0 auto;
    display: grid; grid-template-columns: var(--d-side-w) minmax(0, 1fr);
    align-items: start;
}
.docs-side {
    position: sticky; top: var(--d-top-h);
    height: calc(100vh - var(--d-top-h)); height: calc(100dvh - var(--d-top-h));
    display: flex; flex-direction: column;
    border-right: 1px solid var(--d-border-soft);
    background: var(--d-bg);
}
.docs-side-head { display: none; }
.docs-side-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 28px 16px 40px 24px;
    scrollbar-width: thin; scrollbar-color: var(--d-border-strong) transparent;
}
.docs-nav-group + .docs-nav-group { margin-top: 12px; }
.docs-nav-head {
    width: 100%; min-height: 36px; padding: 6px 8px; border-radius: var(--d-radius-sm);
    display: flex; align-items: center; gap: 10px;
    color: var(--d-head); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: left;
    transition: background var(--d-ease);
}
.docs-nav-head:hover { background: var(--d-bg-mute); }
.docs-nav-head .docs-ico:first-child { font-size: 16px; color: var(--d-muted); }
.docs-nav-head > span { flex: 1 1 auto; min-width: 0; }
.docs-nav-chev { font-size: 14px; color: var(--d-muted); transition: transform var(--d-ease); }
.docs-nav-head[aria-expanded="false"] .docs-nav-chev,
.docs-nav-sub-head[aria-expanded="false"] .docs-nav-chev { transform: rotate(-90deg); }
.docs-nav-head[aria-expanded="false"] + .docs-nav-list,
.docs-nav-sub-head[aria-expanded="false"] + .docs-nav-sub { display: none; }

.docs-nav-list, .docs-nav-sub { list-style: none; }
.docs-nav-list { margin: 4px 0 8px 16px; padding-left: 10px; border-left: 1px solid var(--d-border-soft); }
.docs-nav-link, .docs-nav-sub-head {
    position: relative; width: 100%; min-height: 34px; padding: 6px 10px; border-radius: var(--d-radius-sm);
    display: flex; align-items: center; gap: 8px;
    color: var(--d-muted); font-size: 13.5px; line-height: 1.45; text-align: left;
    transition: background var(--d-ease), color var(--d-ease);
}
.docs-nav-link:hover, .docs-nav-sub-head:hover { background: var(--d-bg-mute); color: var(--d-head); }
.docs-nav-link.is-active { background: var(--d-accent-soft); color: var(--d-accent-text); font-weight: 700; }
.docs-nav-link.is-active::before {
    content: ""; position: absolute; left: -11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
    background: var(--d-accent-text);
}
.docs-nav-sub-head > span:first-child { flex: 1 1 auto; min-width: 0; }
.docs-nav-count {
    flex: none; min-width: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--d-bg-mute); color: var(--d-muted); font-size: 11.5px; line-height: 1.7; text-align: center;
}
.docs-nav-sub { margin: 2px 0 6px 10px; padding-left: 10px; border-left: 1px solid var(--d-border-soft); }

.docs-side-foot { display: none; }
.docs-backdrop { display: none; }

/* 5. Article shell -------------------------------------------------------- */
/* The article takes the room and "On this page" sits against the right edge of the window. */
.docs-main { min-width: 0; }
.docs-page {
    padding: 44px 32px 96px 56px;
    display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 56px; align-items: start;
}
.docs-page.is-wide { display: block; max-width: 1180px; margin: 0 auto; padding-right: 56px; }
.docs-page.is-notoc { grid-template-columns: minmax(0, 1fr); }
.docs-article { min-width: 0; max-width: 880px; }
.docs-page.is-wide .docs-article { max-width: none; }

.docs-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--d-muted); }
.docs-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.docs-crumbs li + li::before {
    content: ""; width: 6px; height: 6px; margin-right: 2px;
    border-top: 1.5px solid var(--d-border-strong); border-right: 1.5px solid var(--d-border-strong); transform: rotate(45deg);
}
.docs-crumbs a { color: var(--d-muted); }
.docs-crumbs a:hover { color: var(--d-accent-text); }
.docs-crumbs [aria-current] { color: var(--d-head); }

.docs-head { margin: 18px 0 32px; }
.docs-head h1 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
/* Badges from the intro sit on the heading line and wrap under a long heading. */
.docs-head-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.docs-head-title > h1 { min-width: 0; }
.docs-head-title > .doc-badges { margin: 0; }
.docs-head-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--d-muted); }
.docs-head-summary { margin-top: 14px; font-size: 16.5px; color: var(--d-muted); }

/* 6. Article content ------------------------------------------------------ */
.doc-content { font-size: 15px; }
.doc-content > :first-child { margin-top: 0; }
.doc-content p, .doc-content ul, .doc-content ol, .doc-content pre, .doc-content blockquote, .doc-content .doc-code,
.doc-content figure, .doc-content details, .doc-content .doc-table-wrap, .doc-content .doc-callout,
.doc-content .doc-tabs, .doc-content .doc-cards, .doc-content .codeblk, .doc-content .note { margin: 0 0 22px; }
.doc-content section, .doc-content .platform-packages { margin: 0; }

.doc-content h2 {
    position: relative; margin: 60px 0 18px;
    font-size: 24px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3;
}
.doc-content > h2:first-child, .doc-content > section:first-child > h2:first-child { margin-top: 0; }
.doc-content h3 { position: relative; margin: 38px 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -.005em; }
.doc-content h4 { margin: 28px 0 10px; font-size: 15.5px; font-weight: 700; }
.doc-content h5, .doc-content h6 { margin: 22px 0 8px; font-size: 14px; font-weight: 700; }
.doc-content h2[id], .doc-content h3[id] { scroll-margin-top: calc(var(--d-top-h) + 24px); }

.doc-anchor {
    margin-left: 8px; padding: 0 4px; border-radius: 4px;
    color: var(--d-border-strong); font-weight: 400; text-decoration: none !important;
    opacity: 0; transition: opacity var(--d-ease), color var(--d-ease);
}
h2:hover > .doc-anchor, h3:hover > .doc-anchor, .doc-anchor:focus-visible { opacity: 1; }
.doc-anchor:hover { color: var(--d-accent-text); }
/* No hover on touch screens, and an always-visible "#" wraps onto its own line under long headings. */
@media (hover: none) { .doc-anchor { display: none; } }

.doc-content a:not([class]) { text-decoration: underline; text-decoration-color: var(--d-accent-border); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color var(--d-ease); }
.doc-content a:not([class]):hover { text-decoration-color: currentColor; }
.doc-content strong, .doc-content b { color: var(--d-head); font-weight: 700; }
.doc-content hr { margin: 44px 0; border: 0; border-top: 1px solid var(--d-border); }
.doc-content ul, .doc-content ol { padding-left: 24px; }
.doc-content li { margin: 8px 0; padding-left: 4px; }
.doc-content li::marker { color: var(--d-muted); }
.doc-content li > ul, .doc-content li > ol { margin: 8px 0 10px; }
.doc-content li > p { margin-bottom: 8px; }
.doc-content li > pre, .doc-content li > .doc-code, .doc-content li > .doc-callout, .doc-content li > .doc-table-wrap { margin: 12px 0 14px; }
.doc-content img { display: block; margin: 0 0 22px; border: 1px solid var(--d-border); border-radius: var(--d-radius); }
.doc-content iframe { max-width: 100%; border: 0; border-radius: var(--d-radius); }
.doc-content .video-container { position: relative; padding-bottom: 56.25%; height: 0; margin-bottom: 22px; }
.doc-content .video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.doc-lead, .doc-content .lead { font-size: 17px; line-height: 1.75; color: var(--d-muted); }
.doc-content .doc-lead { margin-bottom: 28px; }

/* Inline code */
.doc-content :not(pre) > code {
    padding: 1px 6px; border: 1px solid var(--d-icode-border); border-radius: 6px;
    background: var(--d-icode-bg); color: var(--d-icode-text);
    font-size: .88em; overflow-wrap: anywhere;
}
.doc-content a > code { color: inherit; }

/* Code blocks follow the theme. DocsArticleHtml wraps every <pre> in .doc-code with a title bar (language or
   data-title); docs.js adds the copy button to that bar, so nothing moves when it does. */
.doc-code { margin: 0 0 22px; border: 1px solid var(--d-code-border); border-radius: var(--d-radius); background: var(--d-code-bg); overflow: hidden; }
.doc-code-head {
    min-height: 40px; padding: 0 8px 0 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-bottom: 1px solid var(--d-code-border); background: var(--d-code-head); color: var(--d-code-muted);
    font-family: var(--d-font-code); font-size: 12px; letter-spacing: .02em;
}
.doc-code-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.doc-content pre {
    margin-top: 0; padding: 16px 18px; overflow-x: auto;
    border: 1px solid var(--d-code-border); border-radius: var(--d-radius);
    background: var(--d-code-bg); color: var(--d-code-text);
    font-size: 13.5px; line-height: 1.7; tab-size: 4; white-space: pre;
    scrollbar-width: thin; scrollbar-color: var(--d-border-strong) transparent;
}
.doc-content .doc-code > pre { margin: 0; border: 0; border-radius: 0; }
.doc-content pre code { display: block; padding: 0; border: 0; background: none; color: inherit; font-size: inherit; white-space: inherit; }
.doc-copy {
    flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--d-copy-border); border-radius: 7px;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--d-copy-bg); color: var(--d-copy-text);
    font-family: var(--d-font-code); font-size: 12px;
    transition: background var(--d-ease), border-color var(--d-ease), color var(--d-ease);
}
.doc-copy:hover { background: var(--d-copy-hover); border-color: var(--d-accent-border); color: var(--d-accent-text); }
.doc-copy.is-done { border-color: var(--d-ok-border); background: var(--d-ok-soft); color: var(--d-ok); }
.doc-content li > .doc-code { margin: 12px 0 14px; }

/* highlight.js tokens, one set per theme */
.hljs-comment, .hljs-quote { color: var(--d-hl-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-built_in, .hljs-type { color: var(--d-hl-keyword); }
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition { color: var(--d-hl-string); }
.hljs-number, .hljs-meta, .hljs-variable, .hljs-template-variable { color: var(--d-hl-number); }
.hljs-title, .hljs-section, .hljs-name, .hljs-function { color: var(--d-hl-title); }
.hljs-deletion { color: var(--d-hl-deletion); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* Old authoring wrapper: <div class="codeblk"><div class="head">Title</div><pre>… */
.doc-content .codeblk .head { margin-bottom: 6px; color: var(--d-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.doc-content .codeblk pre, .doc-content .codeblk .doc-code { margin-bottom: 8px; }
.doc-content .codeblk-text { margin: 0 0 8px; color: var(--d-muted); font-size: 13.5px; }

/* Tables. DocsArticleHtml wraps every table in .doc-table-wrap, which scrolls sideways when the table is wider
   than the column. The wrap's background draws edge shadows that appear only while there is more to scroll to
   (the cover gradients scroll with the content, the shadows stay put), so it needs no script. */
.doc-table-wrap {
    overflow-x: auto; border: 1px solid var(--d-border); border-radius: var(--d-radius); box-shadow: var(--d-shadow);
    background:
        linear-gradient(to right, var(--d-surface) 30%, transparent) left center / 40px 100% no-repeat local,
        linear-gradient(to left, var(--d-surface) 30%, transparent) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--d-table-edge), transparent) left center / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--d-table-edge), transparent) right center / 14px 100% no-repeat scroll,
        var(--d-surface);
    scrollbar-width: thin; scrollbar-color: var(--d-border-strong) transparent;
}
.doc-content table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.65; font-variant-numeric: tabular-nums; }
.doc-content th, .doc-content td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--d-border-soft); }
.doc-content thead th, .doc-content tr:first-child > th {
    padding-top: 11px; padding-bottom: 11px;
    background: var(--d-bg-soft); color: var(--d-muted);
    font-size: 12.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
    border-bottom-color: var(--d-border);
}
.doc-content tbody tr:last-child > td, .doc-content tbody tr:last-child > th { border-bottom: 0; }
.doc-content tbody tr { transition: background var(--d-ease); }
.doc-content tbody tr:hover { background: var(--d-row-hover); }
/* The first column names the setting, field or message: it reads as the row's title and is not squeezed.
   Setting names are already <strong> in the content; long messages stay regular weight. */
.doc-content td:first-child { min-width: 9.5rem; color: var(--d-head); }
.doc-content td > :last-child { margin-bottom: 0; }
.doc-content td > p { margin-bottom: 8px; }
.doc-content td ul, .doc-content td ol { margin: 4px 0 0; padding-left: 18px; }
.doc-content td li { margin: 2px 0; }
.doc-content td :not(pre) > code { font-size: .86em; }

.doc-content blockquote {
    padding: 14px 18px; border-left: 3px solid var(--d-accent-border); border-radius: 0 var(--d-radius) var(--d-radius) 0;
    background: var(--d-bg-soft); color: var(--d-text);
}
.doc-content blockquote > :last-child { margin-bottom: 0; }
.doc-content figure > :last-child { margin-bottom: 0; }
.doc-content figcaption { margin-top: 10px; color: var(--d-muted); font-size: 13px; text-align: center; }

/* 7. Content components --------------------------------------------------- */

/* Callouts: <div class="doc-callout is-tip|is-warning|is-danger"> (plain = note). ".note" is the old class. */
.doc-callout, .doc-content .note {
    position: relative; padding: 16px 20px 16px 52px;
    border: 1px solid var(--d-accent-border); border-radius: var(--d-radius);
    background: var(--d-accent-soft); color: var(--d-text);
}
[data-theme="dark"] .doc-callout, [data-theme="dark"] .doc-content .note { background: rgba(99, 102, 241, .08); border-color: rgba(129, 140, 248, .28); }
.doc-callout::before, .doc-content .note::before {
    content: ""; position: absolute; left: 18px; top: 18px; width: 20px; height: 20px;
    background: var(--d-accent-text);
    -webkit-mask: var(--d-callout-icon) center / contain no-repeat; mask: var(--d-callout-icon) center / contain no-repeat;
    --d-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5h.01'/%3E%3C/svg%3E");
}
.doc-callout > :last-child, .doc-content .note > :last-child { margin-bottom: 0; }
.doc-callout > p, .doc-callout > ul, .doc-callout > ol { margin-bottom: 8px; }
.doc-callout.is-tip { border-color: var(--d-ok-border); background: var(--d-ok-soft); }
.doc-callout.is-tip::before {
    background: var(--d-ok);
    --d-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.3 1 2.1h5c0-.8.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}
.doc-callout.is-warning { border-color: var(--d-warn-border); background: var(--d-warn-soft); }
.doc-callout.is-warning::before {
    background: var(--d-warn);
    --d-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19zM12 10v4.5M12 17.5h.01'/%3E%3C/svg%3E");
}
.doc-callout.is-danger { border-color: var(--d-danger-border); background: var(--d-danger-soft); }
.doc-callout.is-danger::before {
    background: var(--d-danger);
    --d-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l5 5v8l-5 5H8l-5-5V8zM12 8v5M12 16.5h.01'/%3E%3C/svg%3E");
}
.doc-callout.is-tip strong:first-child { color: var(--d-ok); }
.doc-callout.is-warning strong:first-child { color: var(--d-warn); }
.doc-callout.is-danger strong:first-child { color: var(--d-danger); }

/* Numbered steps: <ol class="doc-steps"><li><h3>Title</h3>…</li></ol> */
.doc-content ol.doc-steps { list-style: none; padding: 0; counter-reset: doc-step; }
.doc-steps > li { position: relative; margin: 0; padding: 0 0 28px 52px; counter-increment: doc-step; }
.doc-steps > li::before {
    content: counter(doc-step);
    position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--d-accent-border); background: var(--d-accent-soft); color: var(--d-accent-text);
    font-size: 14px; font-weight: 700; line-height: 1;
}
.doc-steps > li::after {
    content: ""; position: absolute; left: 15.5px; top: 42px; bottom: 8px; width: 1px; background: var(--d-border);
}
.doc-steps > li:last-child { padding-bottom: 0; }
.doc-steps > li:last-child::after { display: none; }
.doc-steps > li > h3, .doc-steps > li > h4 { margin: 0 0 8px; padding-top: 3px; font-size: 16.5px; }
.doc-steps > li > :last-child { margin-bottom: 0; }

/* Tabs: <div class="doc-tabs" data-tabs="os"><section class="doc-tab" data-tab="windows"><h4 class="doc-tab-title">Windows</h4>…
   Without JavaScript every panel shows under its title. With it, the first panel shows from the first paint
   and the tab row takes the space reserved above the panels, so nothing moves when docs.js builds it. */
.doc-tabs { position: relative; border: 1px solid var(--d-border); border-radius: var(--d-radius); background: var(--d-surface); }
.doc-tab { padding: 18px 20px 2px; }
.doc-tab + .doc-tab { border-top: 1px solid var(--d-border); }
.doc-tab > .doc-tab-title { margin: 0 0 10px; font-size: 14px; color: var(--d-accent-text); }
.doc-tab > :last-child { margin-bottom: 18px; }
[data-js] .doc-tabs { padding-top: 48px; }
[data-js] .doc-tabs > .doc-tab { border-top: 0; }
[data-js] .doc-tabs > .doc-tab > .doc-tab-title { display: none; }
[data-js] .doc-tabs:not(.is-ready) > .doc-tab ~ .doc-tab, [data-js] .doc-tab[hidden] { display: none; }
.doc-tablist {
    position: absolute; left: 0; right: 0; top: 0; height: 48px; padding: 0 10px;
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--d-border); border-radius: var(--d-radius) var(--d-radius) 0 0; background: var(--d-bg-soft);
}
.doc-tablist::-webkit-scrollbar { display: none; }
.doc-tabbtn {
    position: relative; flex: none; height: 48px; padding: 0 14px;
    color: var(--d-muted); font-size: 13.5px; font-weight: 700; white-space: nowrap;
    transition: color var(--d-ease);
}
.doc-tabbtn:hover { color: var(--d-head); }
.doc-tabbtn[aria-selected="true"] { color: var(--d-head); }
.doc-tabbtn[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--d-accent-text); }

/* Where to click: <span class="doc-path">Dashboard › My Tunnels › HTTP</span> (can also be a link) */
.doc-path {
    display: inline-block; padding: 1px 10px; border: 1px solid var(--d-border); border-radius: 999px;
    background: var(--d-bg-soft); color: var(--d-head); font-size: .9em; font-weight: 700; white-space: normal;
}
a.doc-path { text-decoration: none; }
a.doc-path:hover { border-color: var(--d-accent-border); color: var(--d-accent-text); }

/* Badges: <span class="doc-badge is-free|is-paid|is-beta|is-version"> */
.doc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.doc-badge {
    display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--d-border); border-radius: 999px;
    background: var(--d-bg-soft); color: var(--d-text); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.doc-badge.is-free { border-color: var(--d-ok-border); background: var(--d-ok-soft); color: var(--d-ok); }
.doc-badge.is-paid { border-color: var(--d-accent-border); background: var(--d-accent-soft); color: var(--d-accent-text); }
.doc-badge.is-beta { border-color: var(--d-warn-border); background: var(--d-warn-soft); color: var(--d-warn); }

/* Link cards: <div class="doc-cards"><a class="doc-card" href><strong>Title</strong><span>Text</span></a></div>
   An optional <img class="doc-card-logo"> (or .doc-card-ico with an icon) goes first and sits in a tile. */
.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.doc-card {
    position: relative; min-width: 0; padding: 18px 48px 18px 20px; border: 1px solid var(--d-border); border-radius: var(--d-radius-lg);
    display: flex; flex-direction: column; gap: 4px;
    background: var(--d-surface); color: var(--d-text); box-shadow: var(--d-shadow);
    transition: border-color var(--d-ease), box-shadow var(--d-ease), transform var(--d-ease);
}
.doc-card::after {
    content: ""; position: absolute; right: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
    background: var(--d-border-strong);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--d-ease), background var(--d-ease);
}
.doc-card:hover { border-color: var(--d-accent-border); color: var(--d-text); box-shadow: var(--d-shadow-hover); transform: translateY(-2px); }
.doc-card:hover::after { background: var(--d-accent-text); transform: translateX(3px); }
.doc-card > strong { color: var(--d-head); font-size: 14.5px; line-height: 1.45; }
.doc-card > span { color: var(--d-muted); font-size: 13.5px; line-height: 1.6; }
.doc-card:has(> .doc-card-logo, > .doc-card-ico) {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-content: center;
}
.doc-card:has(> .doc-card-logo, > .doc-card-ico) > :not(.doc-card-logo):not(.doc-card-ico) { grid-column: 2; }
.doc-card-logo, .doc-card-ico, .dh-logo {
    grid-row: 1 / span 2; align-self: center;
    width: 44px; height: 44px; padding: 9px; margin: 0 !important; border: 1px solid var(--d-border-soft) !important; border-radius: 12px !important;
    background: var(--d-logo-tile); object-fit: contain;
}
.doc-card-ico { display: flex; align-items: center; justify-content: center; padding: 0; color: var(--d-accent-text); font-size: 20px; }

/* Questions: <details class="doc-faq"><summary>Question</summary>…</details> */
.doc-content details { border: 1px solid var(--d-border); border-radius: var(--d-radius); background: var(--d-surface); }
.doc-content details + details { margin-top: -10px; }
.doc-content summary {
    position: relative; padding: 14px 48px 14px 18px; list-style: none; cursor: pointer;
    color: var(--d-head); font-weight: 700;
}
.doc-content summary::-webkit-details-marker { display: none; }
.doc-content summary::after {
    content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--d-muted); border-bottom: 2px solid var(--d-muted); transform: rotate(45deg);
    transition: transform var(--d-ease);
}
.doc-content details[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.doc-content details > :not(summary) { margin-left: 18px; margin-right: 18px; }
.doc-content details > :last-child:not(summary) { margin-bottom: 18px; }

/* Diagrams: <figure class="doc-diagram"><svg …> using the dg-* classes */
.doc-diagram { padding: 24px 18px; overflow-x: auto; border: 1px solid var(--d-border); border-radius: var(--d-radius-lg); background: var(--d-bg-soft); }
.doc-diagram svg { display: block; margin: 0 auto; min-width: 560px; height: auto; font-family: var(--d-font); }
.dg-box { fill: var(--d-surface); stroke: var(--d-border-strong); stroke-width: 1.5; }
.dg-box-accent { fill: var(--d-accent-soft); stroke: var(--d-accent-text); stroke-width: 1.5; }
.dg-zone { fill: none; stroke: var(--d-accent-border); stroke-width: 1.5; stroke-dasharray: 5 5; }
.dg-line { fill: none; stroke: var(--d-muted); stroke-width: 1.5; }
.dg-line-accent { fill: none; stroke: var(--d-accent-text); stroke-width: 2; }
.dg-head { fill: var(--d-muted); }
.dg-head-accent { fill: var(--d-accent-text); }
.dg-title { fill: var(--d-head); font-size: 13px; font-weight: 700; }
.dg-text { fill: var(--d-muted); font-size: 11.5px; }
.dg-label { fill: var(--d-accent-text); font-size: 11.5px; font-weight: 700; }

/* Platform package lists (Views/Shared/_PlatformPackages.cshtml) inside an article */
.doc-content .platform-packages { margin-top: 32px; }
.doc-content .platform-package-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.doc-content .platform-package-list > li { margin: 0; padding: 14px 16px; border: 1px solid var(--d-border); border-radius: var(--d-radius); background: var(--d-surface); }

/* 8. On this page, pager, feedback --------------------------------------- */
/* A card like the one on blog posts: titled, numbered sections, the current one marked. */
.docs-toc {
    position: sticky; top: calc(var(--d-top-h) + 32px);
    max-height: calc(100vh - var(--d-top-h) - 64px); overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 10px 10px; border: 1px solid var(--d-border); border-radius: var(--d-radius-lg);
    background: var(--d-bg-soft); scrollbar-width: thin; font-size: 13.5px;
}
.docs-toc-title {
    margin: 0 0 8px; padding: 0 8px 14px; border-bottom: 1px solid var(--d-border);
    display: flex; align-items: center; gap: 10px;
    color: var(--d-head); font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.docs-toc-title::before { content: ""; flex: 0 0 4px; height: 15px; border-radius: 2px; background: var(--d-accent); }
.docs-toc ol { list-style: none; counter-reset: toc; }
.docs-toc li { margin: 1px 0; }
.docs-toc li:not(.is-sub) { counter-increment: toc; }
.docs-toc a {
    position: relative; display: flex; align-items: baseline; gap: 8px;
    padding: 7px 10px 7px 12px; border-radius: var(--d-radius-sm);
    color: var(--d-text); line-height: 1.45;
    transition: background var(--d-ease), color var(--d-ease);
}
.docs-toc li:not(.is-sub) > a::before { content: counter(toc, decimal-leading-zero); flex: none; color: var(--d-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.docs-toc .is-sub > a { padding-left: 40px; color: var(--d-muted); font-size: 13px; }
.docs-toc a:hover { background: var(--d-bg-mute); color: var(--d-head); }
.docs-toc a.is-active { background: var(--d-accent-soft); color: var(--d-accent-text); font-weight: 700; }
.docs-toc a.is-active::before { color: inherit; }
.docs-toc a.is-active::after { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--d-accent-text); }
.docs-toc-top {
    margin: 10px 0 0; padding: 12px 10px 4px; border-top: 1px solid var(--d-border);
    display: flex; align-items: center; gap: 8px;
}
.docs-toc .docs-toc-top a { padding: 4px 2px; display: inline-flex; align-items: center; gap: 8px; color: var(--d-muted); font-size: 12.5px; }
.docs-toc .docs-toc-top a:hover { background: none; color: var(--d-accent-text); }

.docs-toc-inline { display: none; margin: 0 0 32px; border: 1px solid var(--d-border); border-radius: var(--d-radius); background: var(--d-bg-soft); }
.docs-toc-inline > summary {
    position: relative; min-height: 50px; padding: 12px 46px 12px 16px; list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 10px; color: var(--d-head); font-size: 14px; font-weight: 700;
}
.docs-toc-inline > summary::before { content: ""; flex: 0 0 4px; height: 15px; border-radius: 2px; background: var(--d-accent); }
.docs-toc-inline > summary::-webkit-details-marker { display: none; }
.docs-toc-inline > summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--d-muted); border-bottom: 2px solid var(--d-muted); transform: rotate(45deg); transition: transform var(--d-ease); }
.docs-toc-inline[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.docs-toc-count { margin-left: auto; color: var(--d-muted); font-size: 12.5px; font-weight: 400; }
.docs-toc-inline ol { list-style: none; padding: 0 16px 8px; counter-reset: toc; }
.docs-toc-inline li:not(.is-sub) { counter-increment: toc; }
.docs-toc-inline a { display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 11px 0; border-top: 1px solid var(--d-border); color: var(--d-text); font-size: 14px; line-height: 1.45; }
.docs-toc-inline li:not(.is-sub) > a::before { content: counter(toc, decimal-leading-zero); flex: none; color: var(--d-muted); font-size: 12px; }
.docs-toc-inline .is-sub > a { padding-left: 32px; color: var(--d-muted); font-size: 13.5px; }

.docs-pager { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--d-border); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.docs-pager a {
    min-width: 0; padding: 16px 20px; border: 1px solid var(--d-border); border-radius: var(--d-radius-lg);
    display: flex; flex-direction: column; gap: 4px; background: var(--d-surface);
    transition: border-color var(--d-ease), box-shadow var(--d-ease);
}
.docs-pager a:hover { border-color: var(--d-accent-border); box-shadow: var(--d-shadow-hover); }
.docs-pager .is-next { grid-column: 2; text-align: right; align-items: flex-end; }
.docs-pager small { display: inline-flex; align-items: center; gap: 6px; color: var(--d-muted); font-size: 12.5px; }
.docs-pager strong { max-width: 100%; color: var(--d-head); font-size: 15px; overflow: hidden; text-overflow: ellipsis; transition: color var(--d-ease); }
.docs-pager a:hover strong { color: var(--d-accent-text); }

.docs-help {
    margin-top: 20px; padding: 20px 22px; border: 1px solid var(--d-border); border-radius: var(--d-radius-lg);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
    background: var(--d-bg-soft);
}
.docs-help p { color: var(--d-head); font-weight: 700; }
.docs-help p span { display: block; margin-top: 2px; color: var(--d-muted); font-size: 13.5px; font-weight: 400; }
.docs-help-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.docs-btn {
    min-height: 40px; padding: 0 16px; border: 1px solid var(--d-border); border-radius: var(--d-radius-sm);
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--d-surface); color: var(--d-head); font-size: 13.5px; font-weight: 700;
    transition: border-color var(--d-ease), background var(--d-ease), color var(--d-ease);
}
.docs-btn:hover { border-color: var(--d-accent-border); color: var(--d-accent-text); }
.docs-btn.is-primary { border-color: var(--d-accent); background: var(--d-accent); color: #fff; }
.docs-btn.is-primary:hover { border-color: var(--d-accent-hover); background: var(--d-accent-hover); color: #fff; }

.docs-empty { max-width: 560px; margin: 56px auto; text-align: center; }
.docs-empty-code { color: var(--d-accent-text); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.docs-empty h1 { margin: 8px 0 12px; font-size: 30px; }
.docs-empty p { margin-bottom: 24px; color: var(--d-muted); }
.docs-empty .docs-help-actions { justify-content: center; }

/* 9. Search dialog -------------------------------------------------------- */
.docs-search {
    width: min(680px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 12vh - 24px)); margin: 12vh auto 0; padding: 0;
    border: 1px solid var(--d-border); border-radius: var(--d-radius-lg);
    background: var(--d-surface); color: var(--d-text); box-shadow: var(--d-shadow-pop);
    overflow: hidden;
}
.docs-search[open] { display: flex; flex-direction: column; }
.docs-search::backdrop { background: var(--d-scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.docs-search-field { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--d-border); }
.docs-search-field .docs-ico { font-size: 19px; color: var(--d-muted); }
.docs-search-input {
    flex: 1 1 auto; min-width: 0; height: 60px; border: 0; background: none; color: var(--d-head);
    font-family: var(--d-font); font-size: 16px; outline: none;
}
.docs-search-input::placeholder { color: var(--d-muted); }
.docs-search-input::-webkit-search-cancel-button { display: none; }
.docs-search-close { flex: none; }
.docs-search-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; scrollbar-width: thin; }
.docs-search-label { padding: 10px 10px 6px; color: var(--d-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.docs-search-list { list-style: none; }
.docs-search-item {
    padding: 10px 12px; border-radius: var(--d-radius); display: flex; gap: 12px; align-items: flex-start;
    color: var(--d-text); scroll-margin: 8px;
}
.docs-search-item .docs-ico { margin-top: 3px; font-size: 16px; color: var(--d-muted); }
.docs-search-item.is-active { background: var(--d-accent-soft); color: var(--d-text); }
.docs-search-item.is-active .docs-ico, .docs-search-item.is-active .docs-search-title { color: var(--d-accent-text); }
.docs-search-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.docs-search-title { color: var(--d-head); font-size: 14.5px; font-weight: 700; }
.docs-search-where { color: var(--d-muted); font-size: 12px; }
.docs-search-excerpt { color: var(--d-muted); font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.docs-search mark { padding: 0 1px; border-radius: 3px; background: rgba(250, 204, 21, .38); color: inherit; }
[data-theme="dark"] .docs-search mark { background: rgba(129, 140, 248, .38); color: #fff; }
.docs-search-empty { padding: 36px 16px; text-align: center; color: var(--d-muted); }
.docs-search-empty strong { display: block; margin-bottom: 4px; color: var(--d-head); }
.docs-search-foot { flex: none; padding: 10px 16px; border-top: 1px solid var(--d-border); display: flex; flex-wrap: wrap; gap: 6px 18px; background: var(--d-bg-soft); color: var(--d-muted); font-size: 12px; }
.docs-search-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* 10. Docs home ----------------------------------------------------------- */
.dh-hero {
    position: relative; margin: 0 0 16px; padding: 56px 52px 52px; overflow: hidden;
    border: 1px solid var(--d-border); border-radius: 28px;
    background:
        radial-gradient(640px 320px at 92% -20%, rgba(129, 140, 248, .18), transparent 70%),
        radial-gradient(480px 260px at -6% 120%, rgba(56, 189, 248, .08), transparent 70%),
        var(--d-bg-soft);
}
.dh-hero h1 { max-width: 680px; font-size: 40px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.dh-hero p { max-width: 620px; margin-top: 18px; color: var(--d-muted); font-size: 16.5px; line-height: 1.7; }
.dh-search {
    width: 100%; max-width: 540px; height: 54px; margin-top: 30px; padding: 0 12px 0 18px;
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--d-border); border-radius: 14px;
    background: var(--d-surface); color: var(--d-muted); font-size: 15px; text-align: left; box-shadow: var(--d-shadow);
    transition: border-color var(--d-ease), box-shadow var(--d-ease);
}
.dh-search:hover { border-color: var(--d-accent-border); box-shadow: var(--d-shadow-hover); }
.dh-search:focus-visible { border-color: var(--d-accent-text); box-shadow: var(--d-ring); outline: none; }
.dh-search .docs-ico { font-size: 19px; }
.dh-search > span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dh-quick { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dh-quick-label { margin-right: 4px; color: var(--d-muted); font-size: 13px; }
.dh-quick a { padding: 5px 13px; border: 1px solid var(--d-border); border-radius: 999px; background: var(--d-surface); color: var(--d-text); font-size: 13px; transition: border-color var(--d-ease), color var(--d-ease); }
.dh-quick a:hover { border-color: var(--d-accent-border); color: var(--d-accent-text); }

.dh-section { margin-top: 72px; }
.dh-section-head { margin-bottom: 24px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.dh-section-head h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.dh-section-head p { margin-top: 6px; color: var(--d-muted); font-size: 15px; }
.dh-section-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.dh-section-link .docs-ico { transition: transform var(--d-ease); }
.dh-section-link:hover .docs-ico { transform: translateX(3px); }

.dh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.dh-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dh-card {
    position: relative; min-width: 0; padding: 26px 26px 22px; border: 1px solid var(--d-border); border-radius: 22px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--d-surface); color: var(--d-text); box-shadow: var(--d-shadow);
    transition: border-color var(--d-ease), box-shadow var(--d-ease), transform var(--d-ease);
}
a.dh-card:hover { border-color: var(--d-accent-border); color: var(--d-text); box-shadow: var(--d-shadow-hover); transform: translateY(-3px); }
/* Icon or step number on the same line as the card title. */
.dh-card-top { display: flex; align-items: center; gap: 14px; min-width: 0; margin-bottom: 2px; }
.dh-card-top h3 { min-width: 0; }
.dh-card-ico {
    flex: none; width: 42px; height: 42px; border: 1px solid var(--d-accent-border); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--d-accent-soft); color: var(--d-accent-text); font-size: 20px;
}
[data-theme="dark"] .dh-card-ico { border-color: #2f3b63; }
.dh-card h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.dh-card p { color: var(--d-muted); font-size: 14px; line-height: 1.7; }
.dh-card p a { text-decoration: underline; text-decoration-color: var(--d-accent-border); text-underline-offset: 3px; }
.dh-card p strong { color: var(--d-head); }

/* "Read the guide" row at the bottom of a card: label left, arrow in a round button right. */
.dh-card-more {
    margin-top: auto; padding-top: 16px; border-top: 1px solid var(--d-border-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    color: var(--d-head); font-size: 13.5px; font-weight: 700;
}
.dh-card > p + .dh-card-more, .dh-card > .doc-content + .dh-card-more, .dh-card > ul + .dh-card-more { margin-top: auto; }
.dh-card-go {
    flex: none; width: 30px; height: 30px; border: 1px solid var(--d-border); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--d-surface); color: var(--d-muted); font-size: 14px;
    transition: background var(--d-ease), border-color var(--d-ease), color var(--d-ease), transform var(--d-ease);
}
.dh-card-more:hover, a.dh-card:hover .dh-card-more { color: var(--d-accent-text); }
.dh-card-more:hover .dh-card-go, a.dh-card:hover .dh-card-go { border-color: var(--d-accent); background: var(--d-accent); color: #fff; transform: translateX(2px); }
.dh-card-spacer { flex: 1 1 auto; }

.dh-step-n {
    flex: none; width: 34px; height: 34px; border: 1px solid var(--d-accent-border); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--d-accent-soft); color: var(--d-accent-text); font-size: 14px; font-weight: 700;
}
.dh-card .doc-code { margin: 6px 0 0; }
.dh-card .doc-code pre { font-size: 12.5px; }
.dh-links { list-style: none; display: grid; margin: 2px 0 0; }
.dh-links li + li { border-top: 1px solid var(--d-border-soft); }
.dh-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; color: var(--d-text); font-size: 14px; transition: color var(--d-ease); }
.dh-links a:hover { color: var(--d-accent-text); }
.dh-links .docs-ico { flex: none; font-size: 14px; color: var(--d-border-strong); transition: transform var(--d-ease), color var(--d-ease); }
.dh-links a:hover .docs-ico { color: var(--d-accent-text); transform: translateX(2px); }
.dh-intro { margin-top: 72px; }

/* Platform and help tiles: logo tile, title and one line, chevron. */
.dh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dh-tiles.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1360px) { .dh-tiles.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dh-tile {
    position: relative; min-width: 0; padding: 16px 44px 16px 16px; border: 1px solid var(--d-border); border-radius: var(--d-radius-lg);
    display: flex; align-items: center; gap: 14px;
    background: var(--d-surface); color: var(--d-text); box-shadow: var(--d-shadow);
    transition: border-color var(--d-ease), box-shadow var(--d-ease), transform var(--d-ease);
}
.dh-tile:hover { border-color: var(--d-accent-border); color: var(--d-text); box-shadow: var(--d-shadow-hover); transform: translateY(-2px); }
.dh-tile .dh-logo { flex: none; }
.dh-tile .doc-card-ico { flex: none; }
.dh-tile-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dh-tile-text strong { color: var(--d-head); font-size: 14.5px; line-height: 1.4; }
.dh-tile-text span { color: var(--d-muted); font-size: 13px; line-height: 1.5; }
.dh-tile > .docs-ico:last-child { position: absolute; right: 16px; top: 50%; margin-top: -8px; font-size: 16px; color: var(--d-border-strong); transition: transform var(--d-ease), color var(--d-ease); }
.dh-tile:hover > .docs-ico:last-child { color: var(--d-accent-text); transform: translateX(3px); }

/* 11. Theme switch (Views/Shared/_ThemeSwitcher.cshtml) --------------------
   Same control as the homepage; these rules stand in for the Tailwind utilities on its markup. */
.theme-switch-wrap { position: fixed; top: 60%; right: 0; -webkit-user-select: none; user-select: none; }
@supports (scrollbar-gutter: stable) { .theme-switch-wrap { right: 2px; } }
.theme-switch-wrap .relative { position: relative; }
.theme-switch-wrap .inline-block { display: inline-block; }
.theme-switch-wrap .rotate-90 { transform: rotate(90deg); }
.theme-switch-wrap .checkbox { position: absolute; opacity: 0; }
.theme-switch-wrap .label {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    width: 3.5rem; height: 2rem; padding: .25rem; border-radius: 9999px;
    background-color: #0f172a; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); cursor: pointer;
}
[data-theme="dark"] .theme-switch-wrap .label { background-color: #fff; }
.theme-switch-wrap .checkbox:focus-visible + .label { box-shadow: var(--d-ring); }
.theme-switch-wrap .ball {
    position: absolute; top: 2px; left: 2px; width: 1.75rem; height: 1.75rem; border-radius: 9999px;
    background-color: #fff; transform: translateX(0); transition: transform .2s linear;
}
[data-theme="dark"] .theme-switch-wrap .ball { background-color: #0f172a; }
.theme-switch-wrap .checkbox:checked + .label .ball { transform: translateX(1.5rem); }

/* Light / Dark buttons at the bottom of the navigation drawer (small screens), as in the homepage menu */
.docs-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.docs-theme-label { color: var(--d-muted); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.docs-theme-seg { display: inline-flex; padding: 3px; border: 1px solid var(--d-border); border-radius: 10px; background: var(--d-bg-soft); }
.docs-theme-seg button { min-height: 36px; padding: 0 12px; border-radius: 7px; display: inline-flex; align-items: center; gap: 6px; color: var(--d-muted); font-size: 13px; font-weight: 700; }
.docs-theme-seg button[aria-pressed="true"] { background: var(--d-surface); color: var(--d-accent-text); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }

/* 12. Footer -------------------------------------------------------------- */
.docs-foot { border-top: 1px solid var(--d-border); background: var(--d-bg-soft); color: var(--d-muted); font-size: 13px; }
.docs-foot-in { max-width: 1600px; margin: 0 auto; padding: 0 28px; }
.docs-foot-top {
    padding: 48px 0 40px;
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px;
}
.docs-foot-brand { max-width: 380px; }
.docs-foot-brand .docs-brand img { width: 60px; height: 49px; }
.docs-foot-brand p { margin-top: 14px; line-height: 1.7; }
.docs-foot-col h2 { margin-bottom: 14px; color: var(--d-head); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.docs-foot-col ul { list-style: none; display: grid; gap: 4px; }
.docs-foot a { color: var(--d-muted); transition: color var(--d-ease); }
.docs-foot a:hover { color: var(--d-accent-text); }
.docs-foot-col a { display: inline-block; padding: 3px 0; }
.docs-foot-bottom {
    padding: 20px 0 24px; border-top: 1px solid var(--d-border);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
    font-size: 12.5px;
}
/* Room on the right for the floating chat button, as in the homepage footer. */
.docs-foot-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-right: 72px; }

/* 13. Small screens ------------------------------------------------------- */
@media (max-width: 1279.98px) {
    .docs-page { display: block; max-width: 900px; margin: 0 auto; padding-right: 40px; padding-left: 40px; }
    .docs-article { max-width: none; }
    .docs-toc { display: none; }
    .docs-toc-inline { display: block; }
    .docs-top-nav a { padding: 8px 8px; letter-spacing: .5px; }
}

@media (max-width: 1023.98px) {
    :root { --d-top-h: 62px; }
    .docs-top-in { padding: 0 16px; gap: 10px; }
    .docs-brand img { width: 56px; height: 46px; }
    .docs-burger { display: inline-flex; }
    .docs-top-nav { display: none; }
    .docs-search-btn { margin-left: auto; margin-right: 0; }
    .theme-switch-wrap { display: none; }

    .docs-shell { display: block; }
    .docs-side {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1100;
        width: min(330px, 88vw); height: auto;
        border-right: 1px solid var(--d-border); box-shadow: var(--d-shadow-pop);
        transform: translateX(-102%); visibility: hidden;
        transition: transform 220ms ease, visibility 0s linear 220ms;
    }
    .docs-nav-open .docs-side { transform: none; visibility: visible; transition: transform 220ms ease; }
    .docs-side-head {
        flex: none; height: 62px; padding: 0 10px 0 20px;
        display: flex; align-items: center; justify-content: space-between;
        border-bottom: 1px solid var(--d-border);
        color: var(--d-head); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    }
    .docs-side-scroll { padding: 16px 12px 20px 16px; }
    .docs-nav-link, .docs-nav-sub-head { min-height: 42px; font-size: 14.5px; }
    .docs-nav-head { min-height: 42px; }
    .docs-side-foot { flex: none; display: block; padding: 12px 16px; border-top: 1px solid var(--d-border); background: var(--d-bg-soft); }
    .docs-side-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 12px; }
    .docs-side-links a { display: inline-block; padding: 6px 0; color: var(--d-head); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    /* pointer-events as well as visibility: a closed backdrop must never take a tap, even while its fade-out
       (or a paused transition in a background tab) has not finished yet. */
    .docs-backdrop { display: block; position: fixed; inset: 0; z-index: 1050; background: var(--d-scrim); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 0s linear 220ms; }
    .docs-nav-open .docs-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 220ms ease; }
    .docs-nav-open body { overflow: hidden; }

    .docs-page, .docs-page.is-wide { padding: 32px 28px 72px; }
    .docs-foot-in { padding: 0 24px; }
    .docs-foot-top { grid-template-columns: 1fr 1fr; }
    .docs-foot-brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 767.98px) {
    body { font-size: 14.5px; }
    .doc-content { font-size: 14.5px; }
    .docs-page, .docs-page.is-wide { padding: 24px 16px 60px; }
    .docs-head { margin-bottom: 26px; }
    .docs-head h1 { font-size: 26px; }
    .doc-content h2 { margin-top: 48px; font-size: 21px; }
    .doc-content h3 { font-size: 17px; margin-top: 32px; }
    .doc-lead, .doc-content .lead { font-size: 15.5px; }
    .doc-content pre { font-size: 13px; padding: 14px 16px; }
    .docs-cta { height: 38px; padding: 0 14px; }

    .docs-search { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
    .docs-search-foot { display: none; }

    .docs-pager { margin-top: 56px; padding-top: 24px; grid-template-columns: 1fr; }
    .docs-pager .is-next { grid-column: 1; }
    .docs-help { flex-direction: column; align-items: flex-start; }
    .docs-foot-in { padding: 0 16px; }
    .docs-foot-top { padding: 36px 0 28px; gap: 28px 24px; }
    .docs-foot-bottom { flex-direction: column; align-items: flex-start; padding-bottom: 88px; }

    .doc-steps > li { padding-left: 44px; }
    .doc-steps > li::before { width: 30px; height: 30px; font-size: 13px; }
    .doc-steps > li::after { left: 14.5px; top: 38px; }
    .doc-tab { padding: 16px 16px 2px; }
    .doc-callout, .doc-content .note { padding: 14px 16px 14px 46px; }
    .doc-callout::before, .doc-content .note::before { left: 15px; top: 16px; }
    .doc-cards { grid-template-columns: 1fr; }

    /* Two-column tables stay tables, with tighter cells. Tables with three or more columns become one card per
       row (labels from BlogArticleHtml.LabelTables): the first cell is the card's title, so its label is not
       repeated, and every other cell shows its column name above the value. */
    .doc-content th, .doc-content td { padding: 11px 14px; }
    .doc-content td:first-child { min-width: 7.5rem; }
    .doc-table-wrap:has(> table.lt-stack) { border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: none; }
    .doc-content table.lt-stack, .doc-content table.lt-stack tbody, .doc-content table.lt-stack tr, .doc-content table.lt-stack td { display: block; width: 100%; }
    .doc-content table.lt-stack thead, .doc-content table.lt-stack tr:first-child:has(> th) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .doc-content table.lt-stack tr { margin-bottom: 12px; border: 1px solid var(--d-border); border-radius: var(--d-radius); background: var(--d-surface); box-shadow: var(--d-shadow); overflow: hidden; }
    .doc-content table.lt-stack tr:last-child { margin-bottom: 0; }
    .doc-content table.lt-stack tbody tr:hover { background: var(--d-surface); }
    .doc-content table.lt-stack td { min-width: 0; padding: 10px 16px; border-bottom: 1px solid var(--d-border-soft); }
    .doc-content table.lt-stack td:last-child { border-bottom: 0; }
    .doc-content table.lt-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--d-muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
    .doc-content table.lt-stack td:first-child { padding-top: 12px; padding-bottom: 12px; background: var(--d-bg-soft); font-size: 14.5px; }
    .doc-content table.lt-stack td:first-child::before { display: none; }

    .dh-hero { padding: 32px 20px 28px; border-radius: 22px; }
    .dh-hero h1 { font-size: 28px; }
    .dh-hero p { font-size: 15px; margin-top: 14px; }
    .dh-search { margin-top: 24px; height: 50px; }
    .dh-quick-label { width: 100%; }
    .dh-section, .dh-intro { margin-top: 52px; }
    .dh-section-head { margin-bottom: 18px; }
    .dh-section-head h2 { font-size: 22px; }
    .dh-grid, .dh-grid.is-3, .dh-tiles, .dh-tiles.is-4 { grid-template-columns: 1fr; gap: 14px; }
    .dh-card { padding: 22px 20px 18px; border-radius: 20px; }
}

/* Phones: a two-column table (name + description) becomes a list inside its box, the name on top and the
   description under it at full width, instead of two narrow columns. The header row is not needed then. */
@media (max-width: 559.98px) {
    .doc-content table:not(.lt-stack):not(:has(td:nth-child(3), th:nth-child(3))),
    .doc-content table:not(.lt-stack):not(:has(td:nth-child(3), th:nth-child(3))) > tbody,
    .doc-content table:not(.lt-stack):not(:has(td:nth-child(3), th:nth-child(3))) tr,
    .doc-content table:not(.lt-stack):not(:has(td:nth-child(3), th:nth-child(3))) td { display: block; width: 100%; }
    .doc-content table:not(.lt-stack):not(:has(td:nth-child(3), th:nth-child(3))) > thead { display: none; }
    .doc-content table:not(.lt-stack):not(:has(td:nth-child(3), th:nth-child(3))) tr { padding: 12px 16px; border-bottom: 1px solid var(--d-border-soft); }
    .doc-content table:not(.lt-stack):not(:has(td:nth-child(3), th:nth-child(3))) tbody tr:last-child { border-bottom: 0; }
    .doc-content table:not(.lt-stack):not(:has(td:nth-child(3), th:nth-child(3))) td { min-width: 0; padding: 0; border: 0; }
    .doc-content table:not(.lt-stack):not(:has(td:nth-child(3), th:nth-child(3))) td:first-child { margin-bottom: 3px; }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .dh-grid.is-3 { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .docs-search-btn { flex: none; width: 42px; padding: 0; justify-content: center; border-color: transparent; background: none; color: var(--d-head); }
    .docs-search-btn > span, .docs-search-btn > .docs-kbd { display: none; }
    .docs-search-btn .docs-ico { font-size: 20px; }
    .docs-brand { margin-right: auto; }
    .docs-search-btn { margin-left: 0; }
}

@media (hover: none) { .docs-search-btn > .docs-kbd, .dh-search > .docs-kbd { display: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .docs-top, .docs-side, .docs-toc, .docs-toc-inline, .docs-pager, .docs-help, .docs-foot, .theme-switch-wrap, .doc-copy, .doc-anchor, #chatButton { display: none !important; }
    .docs-shell, .docs-page { display: block; padding: 0; max-width: none; }
    .doc-content pre { white-space: pre-wrap; }
    [data-js] .doc-tabs { padding-top: 0; }
    [data-js] .doc-tab[hidden] { display: block !important; }
    [data-js] .doc-tabs > .doc-tab > .doc-tab-title { display: block; }
    .doc-tablist { display: none; }
}