/* ==========================================================================
   DMD Next manual — wiki shell
   Loaded on: /dmdnext/* only, and only when the shell is enabled.

   Builds on the --rm-* design system in roadmap.css (surface, border, text,
   shadows, dark mode) so the manual matches the rest of the docs site. Nothing
   here restyles page content: the shell supplies the frame, the pages keep
   their own Bootstrap markup untouched.

   Everything is namespaced .dnx-* to stay clear of the Bootstrap theme.
   ========================================================================== */

.dnx {
  --dnx-rail: 268px;
  --dnx-toc: 224px;
  --dnx-top: 76px;          /* sticky navbar height; measured by JS on load */
  --dnx-gutter: 2rem;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  /* Width comes from the wrapping Bootstrap .container, which is the same one
     the navbar uses — so the manual and the top menu share an edge. */
  width: 100%;
  margin: 0;
  padding: 0;
}

/* --- Sidebar ------------------------------------------------------------ */

.dnx-rail {
  position: sticky;
  top: var(--dnx-top);
  max-height: calc(100vh - var(--dnx-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 2rem;
}

.dnx-filter-wrap {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--rm-surface);
  padding: 1rem 0 .65rem;
  border-bottom: 1px solid var(--rm-border);
}

.dnx-filter { position: relative; display: flex; align-items: center; margin: 0; }
.dnx-filter > .bx {
  position: absolute;
  left: .6rem;
  color: var(--rm-text-muted);
  font-size: 1.05rem;
  pointer-events: none;
}
.dnx-filter input {
  width: 100%;
  font: inherit;
  font-size: .875rem;
  color: var(--rm-text);
  background: var(--rm-surface-2);
  border: 1px solid var(--rm-border);
  border-radius: .6rem;
  padding: .4rem 2.4rem .4rem 2rem;
}
.dnx-filter input:focus {
  outline: none;
  border-color: var(--rm-indigo);
  background: var(--rm-surface);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .16);
}
.dnx-filter .dnx-kbd { position: absolute; right: .5rem; pointer-events: none; }

.dnx-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  line-height: 1;
  color: var(--rm-text-muted);
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-bottom-width: 2px;
  border-radius: .3rem;
  padding: .18rem .35rem;
  white-space: nowrap;
}

.dnx-group { padding: .85rem 0 0; }
.dnx-group-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rm-text-muted);
  padding: .3rem .5rem;
  border-radius: .4rem;
  cursor: pointer;
}
.dnx-group-head:hover { color: var(--rm-text); background: var(--rm-surface-2); }
.dnx-chev { font-size: 1rem; transition: transform .18s ease; }
.dnx-group[data-dnx-open="0"] .dnx-chev { transform: rotate(-90deg); }
.dnx-group[data-dnx-open="0"] .dnx-group-body { display: none; }
.dnx-count {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .75;
}
.dnx-group-body { display: flex; flex-direction: column; gap: 1px; }

.dnx-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .55rem;
  border-radius: .45rem;
  font-size: .855rem;
  line-height: 1.35;
  color: var(--rm-text);
  text-decoration: none;
}
.dnx-link:hover { background: var(--rm-surface-2); color: var(--rm-text); text-decoration: none; }
.dnx-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--dnx-c, var(--rm-text-muted));
}
.dnx-link.is-current {
  background: rgba(99, 102, 241, .1);
  color: var(--rm-indigo-dark);
  font-weight: 600;
}
[data-bs-theme="dark"] .dnx-link.is-current { color: #a5b4fc; }
.dnx-link.is-current::before {
  content: "";
  position: absolute;
  left: -.55rem;
  top: .3rem;
  bottom: .3rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--dnx-c, var(--rm-indigo));
}
.dnx-depth-2 { padding-left: 1.35rem; }
.dnx-depth-3 { padding-left: 2.15rem; }

/* Section anchors, injected under the current page by the JS. */
.dnx-anchors {
  list-style: none;
  margin: .15rem 0 .35rem .85rem;
  padding: 0 0 0 .7rem;
  border-left: 1px solid var(--rm-border);
}
.dnx-depth-2 + .dnx-anchors { margin-left: 1.65rem; }
.dnx-depth-3 + .dnx-anchors { margin-left: 2.45rem; }
.dnx-anchors a {
  display: block;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--rm-text-muted);
  padding: .2rem .5rem;
  border-radius: .35rem;
  text-decoration: none;
}
.dnx-anchors a:hover { color: var(--rm-text); background: var(--rm-surface-2); text-decoration: none; }
.dnx-anchors a.is-active { color: var(--rm-indigo-dark); background: rgba(99, 102, 241, .1); font-weight: 600; }
[data-bs-theme="dark"] .dnx-anchors a.is-active { color: #a5b4fc; }

.dnx-rail-foot {
  margin-top: 1.1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--rm-border);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dnx-rail-foot a {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .825rem;
  color: var(--rm-text-muted);
  padding: .3rem .55rem;
  border-radius: .45rem;
  text-decoration: none;
}
.dnx-rail-foot a:hover { background: var(--rm-surface-2); color: var(--rm-text); text-decoration: none; }

.dnx-empty { padding: 1.1rem .6rem; font-size: .85rem; color: var(--rm-text-muted); }

/* --- Main column -------------------------------------------------------- */

.dnx-main { min-width: 0; padding-bottom: 3rem; }

.dnx-topline {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: 1.15rem 0 .5rem;
}
.dnx-crumb {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--rm-text-muted);
  min-width: 0;
}
.dnx-crumb a { color: var(--rm-text-muted); text-decoration: none; }
.dnx-crumb a:hover { color: var(--rm-indigo); text-decoration: underline; }
.dnx-crumb .bx { opacity: .55; font-size: .95rem; }
.dnx-crumb-cur { color: var(--rm-text); font-weight: 600; }

.dnx-drawer-btn,
.dnx-search-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  font-size: .8rem;
  color: var(--rm-text-muted);
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: .5rem;
  padding: .3rem .6rem;
  cursor: pointer;
}
.dnx-drawer-btn:hover,
.dnx-search-btn:hover { color: var(--rm-text); border-color: var(--rm-indigo); }
.dnx-search-btn { margin-left: auto; }
.dnx-drawer-btn { display: none; }

/* The pages ship their own .container; inside the shell the shell owns width. */
.dnx-content .container,
.dnx-content .container-fluid,
.dnx-content .container-lg,
.dnx-content .container-xl,
.dnx-content .container-xxl {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* Each page repeats the site breadcrumb; the shell's topline replaces it. */
.dnx-content > nav[aria-label="breadcrumb"] { display: none; }

/* Anchor targets must clear the sticky navbar. */
.dnx-content [id] { scroll-margin-top: calc(var(--dnx-top) + 1rem); }

.dnx-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rm-border);
}
.dnx-pager a {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .8rem 1rem;
  border: 1px solid var(--rm-border);
  border-radius: .75rem;
  background: var(--rm-surface);
  color: var(--rm-text);
  text-decoration: none;
}
.dnx-pager a:hover { border-color: var(--rm-indigo); background: var(--rm-surface-2); text-decoration: none; }
.dnx-pager .dnx-next { text-align: right; grid-column: 2; }
.dnx-pager small {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rm-text-muted);
}
.dnx-pager span { font-size: .92rem; font-weight: 600; line-height: 1.35; }

/* --- Contents rail ------------------------------------------------------ */

.dnx-toc {
  display: none;
  position: sticky;
  top: var(--dnx-top);
  max-height: calc(100vh - var(--dnx-top));
  overflow-y: auto;
  padding: 1.25rem 0 2rem 1rem;
}
.dnx-toc-head {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rm-text-muted);
  margin: 0 0 .5rem .7rem;
}
.dnx-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rm-border); }
.dnx-toc a {
  display: block;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--rm-text-muted);
  padding: .25rem .7rem;
  border-left: 2px solid transparent;
  margin-left: -1px;
  text-decoration: none;
}
.dnx-toc a:hover { color: var(--rm-text); text-decoration: none; }
.dnx-toc a.is-active {
  color: var(--rm-indigo-dark);
  border-left-color: var(--rm-indigo);
  font-weight: 600;
}
[data-bs-theme="dark"] .dnx-toc a.is-active { color: #a5b4fc; }

/* --- Search palette ----------------------------------------------------- */

.dnx-scrim {
  position: fixed;
  inset: 0;
  background: rgba(9, 12, 24, .5);
  z-index: 1080;
}
.dnx-scrim[hidden] { display: none; }

.dnx-pal {
  position: fixed;
  z-index: 1090;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 2rem));
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: .9rem;
  box-shadow: var(--rm-shadow-lg);
  overflow: hidden;
}
.dnx-pal[hidden] { display: none; }
.dnx-pal-in {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--rm-border);
}
.dnx-pal-in > .bx { color: var(--rm-text-muted); font-size: 1.15rem; }
.dnx-pal-in input {
  flex: 1;
  font: inherit;
  font-size: 1rem;
  color: var(--rm-text);
  background: none;
  border: 0;
  outline: none;
  min-width: 0;
}
.dnx-pal-x {
  background: none;
  border: 0;
  color: var(--rm-text-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem;
}
.dnx-pal-x:hover { color: var(--rm-text); }
.dnx-pal-res { max-height: min(52vh, 420px); overflow-y: auto; padding: .4rem; }
.dnx-pal-grp {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rm-text-muted);
  padding: .65rem .7rem .3rem;
}
.dnx-pal-i {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .45rem .7rem;
  border-radius: .55rem;
  color: var(--rm-text);
  text-decoration: none;
}
.dnx-pal-i:hover { text-decoration: none; color: var(--rm-text); }
.dnx-pal-i[data-dnx-sel="1"] { background: rgba(99, 102, 241, .12); }
.dnx-pal-i .dnx-dot { width: 7px; height: 7px; }
.dnx-pal-i .dnx-pal-t {
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.dnx-pal-i .dnx-pal-p {
  font-size: .75rem;
  color: var(--rm-text-muted);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dnx-pal-i mark { background: none; color: var(--rm-indigo); font-weight: 700; padding: 0; }
.dnx-pal-empty { padding: 1.6rem 1rem; text-align: center; color: var(--rm-text-muted); font-size: .875rem; }
.dnx-pal-foot {
  display: flex;
  gap: 1rem;
  padding: .55rem 1rem;
  border-top: 1px solid var(--rm-border);
  background: var(--rm-surface-2);
  font-size: .72rem;
  color: var(--rm-text-muted);
}
.dnx-pal-foot span { display: flex; align-items: center; gap: .3rem; }

/* --- Breakpoints -------------------------------------------------------- */

/* Below lg the sidebar becomes a drawer. */
@media (max-width: 991.98px) {
  .dnx-rail {
    position: fixed;
    top: var(--dnx-top);
    left: 0;
    width: var(--dnx-rail);
    max-height: calc(100vh - var(--dnx-top));
    z-index: 1085;
    background: var(--rm-surface);
    border-right: 1px solid var(--rm-border);
    box-shadow: var(--rm-shadow-lg);
    padding: 0 .85rem 2rem;
    transform: translateX(-101%);
    transition: transform .22s ease;
  }
  .dnx.is-drawer-open .dnx-rail { transform: none; }
  .dnx-drawer-btn { display: inline-flex; }
}

@media (min-width: 992px) {
  .dnx {
    grid-template-columns: var(--dnx-rail) minmax(0, 1fr);
    gap: 0 var(--dnx-gutter);
  }
  .dnx-rail { border-right: 1px solid var(--rm-border); padding-right: 1rem; }
}

/* The contents rail only appears at xxl, where the container reaches 1320px and
   there is room for three columns. Pages with no section anchors never get it —
   an empty rail is just a dead strip down the right-hand side. */
@media (min-width: 1400px) {
  .dnx:not(.dnx-no-toc) { grid-template-columns: var(--dnx-rail) minmax(0, 1fr) var(--dnx-toc); }
  .dnx:not(.dnx-no-toc) .dnx-toc { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .dnx-rail, .dnx-chev { transition: none; }
}