/* NetCorePpt — document/ page styles.
   Layered on top of ../css/style.css + ../css/docs.css. */

.document-page .doc-rich { color: var(--text, #374151); line-height: 1.75; margin: 0 0 14px; }
.document-page .doc-rich p { margin: 0 0 10px; }
.document-page .doc-rich a { color: #6D28D9; text-decoration: none; }
.document-page .doc-rich a:hover { text-decoration: underline; }
.document-page .doc-rich code,
.document-page .doc-list code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .86em; background: #F3F0FF; color: #5B21B6;
  padding: 1px 5px; border-radius: 5px;
}
.document-page .doc-list { margin: 0 0 12px; padding-left: 22px; }
.document-page .doc-list li { margin: 4px 0; }
.document-page .doc-img {
  max-width: 100%; height: auto; display: block; margin: 10px 0 18px;
  border: 1px solid #E9E5F5; border-radius: 10px; background: #fff;
}
.document-page .docs-section > .docs-h2,
.document-page .docs-section > .docs-h3 { margin-top: 28px; }

/* Page intro: sits at the top of the content column, above section 0, instead
   of under the h1 in the hero. */
.document-page .docs-intro {
  margin: 4px 0 22px; max-width: 860px;
  color: var(--text-muted, #6B7280); font-size: 16px; line-height: 1.7;
}

/* ---- code blocks: JS / C# panes ---- */
.docblock {
  border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden;
  margin: 0 0 20px; background: #fff;
}
.docblock-head {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: #FAFAFB; border-bottom: 1px solid #E5E7EB; padding: 0 10px;
}
.docblock-tabs { display: flex; gap: 4px; }
.dt {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: 600 12.5px/1 "Inter", system-ui, sans-serif; color: #6B7280;
  padding: 11px 12px; border-bottom: 2px solid transparent;
}
.dt:hover { color: #4C1D95; }
.dt.is-on { color: #5B21B6; border-bottom-color: #6D28D9; }
.docblock-file {
  font: 500 11.5px/1 "JetBrains Mono", monospace; color: #6B7280;
  background: #F3F4F6; border-radius: 6px; padding: 5px 8px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 46%;
}
.docblock-pane { position: relative; }
.code-label {
  display: block; font: 600 11px/1 "Inter", sans-serif; letter-spacing: .05em;
  text-transform: uppercase; color: #9CA3AF; padding: 9px 14px 0;
}
.docblock-pre--solo, .docblock-pane pre, .docblock > pre {
  margin: 0; padding: 10px 14px 16px; overflow-x: auto;
  background: #FCFCFD; font: 400 12.8px/1.65 "JetBrains Mono", ui-monospace, monospace;
  color: #1F2937; tab-size: 4;
}
.docblock-pane pre code { font: inherit; white-space: pre; }

/* stacked (no JS): show both panes, labels carry the meaning */
.docblock:not(.is-tabs) .docblock-pane + .docblock-pane { border-top: 1px dashed #E5E7EB; }
.docblock:not(.is-tabs) .docblock-pane[data-pane="cs"] { background: #FBFAFF; }
/* tabbed (JS enhanced): only the selected pane */
.docblock.is-tabs .docblock-pane { display: none; }
.docblock.is-tabs .docblock-pane.is-on { display: block; }
.docblock.is-tabs .docblock-pane[data-pane="cs"] { background: #FBFAFF; }

@media (max-width: 640px) {
  .docblock-pane pre, .docblock > pre { font-size: 12px; padding: 8px 10px 14px; }
  .docblock-file { display: none; }
}

/* ---- left navigation ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.docs-shell {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 44px;
  align-items: start;
}
/* slim breadcrumb bar — the old hero banner is gone; the page title now
   lives at the top of the article column (Microsoft Learn style) */
.document-page .docs-crumbbar {
  padding: 13px 0; border-bottom: 1px solid var(--border, #E2E8F0); background: #fff;
}
.document-page .docs-crumbbar > .docs-container {
  max-width: 1280px;
  display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 44px;
}
.document-page .docs-crumbbar > .docs-container > * { grid-column: 2; min-width: 0; }
.document-page .docs-crumbbar .docs-breadcrumb { margin-bottom: 0; }

/* page title inside the article column, above the intro paragraph */
.document-page .docs-h1 {
  margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 800;
  letter-spacing: -.02em; color: var(--slate-900, #0F172A); line-height: 1.18;
}

.docs-body { min-width: 0; }
.docs-body > .docs-container { max-width: none; margin: 0; padding: 0; }
.docs-body > .docs-container:first-child { padding-top: 26px; }

/* `align-self: stretch` overrides the shell's `align-items: start`. Without it
   the aside is only as tall as its own content, so `.side-sticky` has zero
   travel inside its containing block and scrolls away with the page. */
.docs-sidebar { min-width: 0; align-self: stretch; }
.side-sticky {
  position: sticky; top: calc(var(--header-h, 68px) + 24px);
  max-height: calc(100vh - var(--header-h, 68px) - 48px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 6px 30px 0;
  scrollbar-width: thin; scrollbar-color: var(--slate-300, #CBD5E1) transparent;
}
.side-sticky::-webkit-scrollbar { width: 6px; }
.side-sticky::-webkit-scrollbar-thumb { background: var(--slate-300, #CBD5E1); border-radius: 3px; }
.side-sticky::-webkit-scrollbar-track { background: transparent; }
/* the nav is usually taller than the viewport: fade the cut edge so it reads as
   "there is more below" instead of "the list ends here" (classes set by document.js) */
.side-sticky.is-scrollable {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent 100%);
}
.side-sticky.is-scrolled {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30px);
  mask-image: linear-gradient(180deg, transparent 0, #000 30px);
}
.side-sticky.is-scrollable.is-scrolled {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30px,
                      #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 30px,
               #000 calc(100% - 30px), transparent 100%);
}
.side-title {
  margin: 0 0 13px 10px;
  font: 700 11px/1 "Inter", system-ui, sans-serif; letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate-400, #94A3B8);
}
.side-title span { color: var(--violet-500, #8B5CF6); margin: 0 5px; }
.side-group { margin: 0 0 13px; }
.side-group-t {
  margin: 0 0 5px 10px;
  font: 700 11.5px/1 "Inter", system-ui, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--violet-700, #6D28D9);
}
.side-list { list-style: none; margin: 0; padding: 0; }
.side-link {
  display: block; padding: 5.5px 10px; border-radius: 0 8px 8px 0;
  border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.35; color: var(--slate-600, #475569);
  text-decoration: none; transition: background .15s, color .15s;
}
/* hover must NOT mimic the selected state: grey fill + dark text, no violet.
   (violet-50 fill + violet text is reserved for .is-current so a resting
   mouse cursor can never make another menu look selected.) */
.side-link:hover { background: var(--slate-100, #F1F5F9); color: var(--slate-800, #1E293B); }
.side-link:focus-visible {
  outline: 2px solid var(--violet-500, #8B5CF6); outline-offset: -2px;
  border-radius: 0 8px 8px 0;
}
.side-item.is-current > .side-link {
  background: var(--violet-50, #F5F3FF); color: var(--violet-700, #6D28D9);
  font-weight: 600; border-left-color: var(--violet-700, #6D28D9);
}
.side-sub {
  list-style: none; margin: 3px 0 6px 10px; padding: 0 0 0 11px;
  border-left: 1px solid var(--border, #E2E8F0);
}
.side-sub a {
  display: block; padding: 3px 8px; border-radius: 6px;
  font-size: 13px; line-height: 1.45; color: var(--slate-500, #64748B); text-decoration: none;
}
.side-sub a:hover { background: var(--slate-100, #F1F5F9); color: var(--slate-800, #1E293B); }
.side-sub a.is-on { color: var(--violet-700, #6D28D9); font-weight: 600; }

.side-toggle { display: none; }
.docs-body h2[id], .docs-body h3[id], .docs-body h4[id] {
  scroll-margin-top: calc(var(--header-h, 68px) + 20px);
}

@media (max-width: 1024px) {
  .docs-shell { display: block; padding: 0 20px; }
  .document-page .docs-crumbbar > .docs-container { display: block; max-width: 1080px; }
  .side-toggle {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 22px 0 0; padding: 10px 15px; cursor: pointer;
    font: 600 13.5px/1 "Inter", system-ui, sans-serif;
    color: var(--violet-700, #6D28D9); background: #fff;
    border: 1px solid var(--border, #E2E8F0); border-radius: 10px;
  }
  .side-toggle:hover { background: var(--violet-50, #F5F3FF); }
  .side-toggle-ico { position: relative; width: 14px; height: 10px; flex: none; }
  .side-toggle-ico::before, .side-toggle-ico::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px;
    background: currentColor; border-radius: 2px;
  }
  .side-toggle-ico::before { top: 0; box-shadow: 0 4px 0 currentColor; }
  .side-toggle-ico::after { bottom: 0; }
  .docs-sidebar { display: none; margin: 14px 0 4px; }
  .docs-sidebar.is-open {
    display: block; padding: 16px 16px 6px;
    background: #fff; border: 1px solid var(--border, #E2E8F0); border-radius: 14px;
  }
  .side-sticky { position: static; max-height: none; overflow: visible; padding: 0 0 6px; }
  .side-title { margin-left: 2px; }
  .side-group-t { margin-left: 2px; }
}

/* ------------------------------------------------- index.html (document/ root) */
ul.docs-index {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 14px;
}
ul.docs-index > li {
  margin: 0; padding: 15px 17px 14px;
  background: #fff; border: 1px solid var(--border, #E2E8F0); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
ul.docs-index > li:hover {
  border-color: var(--violet-300, #C4B5FD);
  box-shadow: 0 4px 14px rgba(109, 40, 217, .07);
}
ul.docs-index a.t {
  display: block; margin: 0 0 6px;
  font-size: 15px; font-weight: 600; line-height: 1.3;
  color: var(--violet-700, #6D28D9); text-decoration: none;
}
ul.docs-index a.t:hover { text-decoration: underline; }
ul.docs-index p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--slate-600, #475569); }
ul.docs-index .alt {
  display: inline-block; margin-top: 9px;
  font-size: 12px; color: var(--slate-400, #94A3B8);
}
ul.docs-index .alt a { color: var(--slate-500, #64748B); }
@media (max-width: 640px) {
  ul.docs-index { grid-template-columns: 1fr; }
}