/* Legacy docs only (loaded after site.css): a muted frame and the "no longer supported" banner. */

/* Greyish legacy look: the live --nds-* surface tokens restated in desaturated Burgundy tones.
   Light: content Burgundy 10 % (#ebe7ea), frame (nav, toolbar, page) Burgundy 20 % (#d7cfd4); header stays white. */
html:not([data-theme^="dark"]) body {
  --nds-bg: #ebe7ea;
  --nds-surface: #f3f0f2;
  --nds-panel: #f3f0f2;
  --nds-header-bg: #fff;
  --nds-sidebar-bg: #d7cfd4;
  --nds-input-bg: #f3f0f2;
  --nds-pill-bg: #f3f0f2;
  --nds-nav-active-bg: #c3b8bf;
  --nds-code-bg: #f3f0f2;
  --nds-row-1: #f3f0f2;
  --nds-row-2: #e3dde1;
  --nds-tab: #e3dde1;
  --nds-tab-on: #d7cfd4;
  --nds-tab-body: #f3f0f2;
  --nds-adm-note: #f3f0f2;
  --nds-adm-tip: #e3dde1;
  --nds-adm-important: #f3f0f2;
  background-color: #d7cfd4;
}

html:not([data-theme^="dark"]) body.article .body {
  box-shadow: -16px 0 40px -16px rgba(56, 17, 42, 0.22), 16px 0 40px -16px rgba(56, 17, 42, 0.16);
}

/* img/caret.svg is #c1c1c1, too close to the sidebar tint; same triangle, darker. */
html:not([data-theme^="dark"]) .nav-item-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M10.19 3 24.19 15 10.19 27z' fill='%236b5763' stroke='%236b5763' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Dark: same selectors as the live tokens (body.article sets its own), so these win by order. */
html[data-theme^="dark"] body,
html[data-theme^="dark"] body.article {
  --nds-bg: #241d22;
  --nds-surface: #2f272c;
  --nds-panel: #2f272c;
  --nds-header-bg: #2f272c;
  --nds-sidebar-bg: #2f272c;
  --nds-code-bg: #1c171a;
  --nds-th-bg: #3a3136;
  --nds-nav-active-bg: rgba(255, 255, 255, 0.08);
  background-color: #2f272c;
}

html[data-theme^="dark"] body.article .body {
  box-shadow: -16px 0 40px -16px rgba(0, 0, 0, 0.35), 16px 0 40px -16px rgba(0, 0, 0, 0.35);
}

/* Banner sticks below the 68px header (3.77778rem in the built site.css). The UI's sticky offsets
   are compiled to fixed values, so they are restated here plus --legacy-banner-h (set by the banner). */
.legacy-banner {
  position: sticky;
  top: 3.77778rem;
  z-index: 3; /* above the toolbar (2), below the header (4) */
  flex: none;
  text-align: center;
  padding: 10px 24px;
  border-bottom: 2px solid #ff9e33;
  background: #fff5eb;
  color: #38112a;
  font-size: 14px;
  line-height: 1.5;
}

.legacy-banner p {
  margin: 0;
}

.legacy-banner a {
  color: #38112a;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #ff9e33;
}

html[data-theme^="dark"] .legacy-banner {
  /* Orange tint on an opaque base: the banner is sticky, so content scrolls under it. */
  background: linear-gradient(rgba(255, 158, 51, 0.14), rgba(255, 158, 51, 0.14)), #2f272c;
  color: #fff;
}

html[data-theme^="dark"] .legacy-banner a {
  color: #fff;
}

.toolbar {
  top: calc(3.77778rem + var(--legacy-banner-h, 0px));
}

.toc.sidebar .toc-menu {
  top: calc(6.88889rem + var(--legacy-banner-h, 0px));
}

@media screen and (max-width: 1023.5px) {
  .nav-container {
    top: calc(3.77778rem + var(--legacy-banner-h, 0px));
  }
}

@media screen and (min-width: 1024px) {
  .nav {
    top: calc(3.77778rem + var(--legacy-banner-h, 0px));
    height: calc(100vh - 3.77778rem - var(--legacy-banner-h, 0px));
  }
}

@media print {
  .legacy-banner {
    position: static;
    background: none;
  }
}