/* Standalone demos share one return link. Embedded demos keep their original layout. */
body > nav.kd-demo-return {
  display: none;
}

html[data-kd-demo-navigation="standalone"] {
  --kd-demo-navigation-height: 44px;
  scroll-padding-top: var(--kd-demo-navigation-height);
}

/* All current demo bodies have zero top padding. Other padding is left intact. */
html[data-kd-demo-navigation="standalone"] body {
  padding-top: var(--kd-demo-navigation-height);
}

html[data-kd-demo-navigation="standalone"] body > nav.kd-demo-return {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  height: var(--kd-demo-navigation-height);
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid #dce0eb;
  background: #fff;
  color: #293253;
  font: 500 13px/1.5 "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  letter-spacing: 0;
  text-align: left;
}

html[data-kd-demo-navigation="standalone"] body > nav.kd-demo-return > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #293253;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  white-space: nowrap;
}

html[data-kd-demo-navigation="standalone"] body > nav.kd-demo-return > a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html[data-kd-demo-navigation="standalone"] body > nav.kd-demo-return > a:focus-visible {
  outline: 2px solid #293253;
  outline-offset: -4px;
}

/* Existing document-level headers stay immediately below the return bar. */
html[data-kd-demo-navigation="standalone"] body header.top,
html[data-kd-demo-navigation="standalone"] body[data-services-product="sns"] .workspace-toolbar {
  top: var(--kd-demo-navigation-height);
}

/* Preserve the existing viewport-filling shells without adding 44px to their height. */
html[data-kd-demo-navigation="standalone"] body[data-services-product="agent"] .shell,
html[data-kd-demo-navigation="standalone"] body[data-services-product="crm"] .shell,
html[data-kd-demo-navigation="standalone"] body[data-services-product="ec-admin"] .shell,
html[data-kd-demo-navigation="standalone"] body[data-services-product="reviews"] .shell,
html[data-kd-demo-navigation="standalone"] body[data-services-product="iot"] .app,
html[data-kd-demo-navigation="standalone"] body[data-services-product="worker"] .north-app {
  min-height: calc(100vh - var(--kd-demo-navigation-height));
}

@media (min-width: 641px) {
  html[data-kd-demo-navigation="standalone"] body[data-services-product="shift"] .rail {
    top: var(--kd-demo-navigation-height);
    height: calc(100vh - var(--kd-demo-navigation-height));
  }

  html[data-kd-demo-navigation="standalone"] body[data-services-product="mobile-order"] .cart {
    top: calc(74px + var(--kd-demo-navigation-height));
  }

  html[data-kd-demo-navigation="standalone"] body[data-services-product="quote"] .pp {
    max-height: calc(100vh - 84px - var(--kd-demo-navigation-height));
  }
}

@media (min-width: 761px) {
  html[data-kd-demo-navigation="standalone"] body[data-services-product="agent"] .side,
  html[data-kd-demo-navigation="standalone"] body[data-services-product="crm"] .side,
  html[data-kd-demo-navigation="standalone"] body[data-services-product="iot"] .rail {
    top: var(--kd-demo-navigation-height);
    height: calc(100vh - var(--kd-demo-navigation-height));
  }

  html[data-kd-demo-navigation="standalone"] body[data-services-product="agent"] .mh,
  html[data-kd-demo-navigation="standalone"] body[data-services-product="iot"] .bar {
    top: var(--kd-demo-navigation-height);
  }
}

@media (min-width: 901px) {
  html[data-kd-demo-navigation="standalone"] body[data-services-product="ec-admin"] .side,
  html[data-kd-demo-navigation="standalone"] body[data-services-product="reviews"] .side {
    top: var(--kd-demo-navigation-height);
    height: calc(100vh - var(--kd-demo-navigation-height));
  }

  html[data-kd-demo-navigation="standalone"] body[data-services-product="ec-admin"] .bar {
    top: var(--kd-demo-navigation-height);
  }

  html[data-kd-demo-navigation="standalone"] body[data-services-product="member"] .phone-col {
    top: calc(78px + var(--kd-demo-navigation-height));
  }

  html[data-kd-demo-navigation="standalone"] body[data-services-product="docs-ai"] .chatwrap,
  html[data-kd-demo-navigation="standalone"] body[data-services-product="inquiry"] .boxwrap {
    height: calc(100vh - 58px - var(--kd-demo-navigation-height));
  }

  html[data-kd-demo-navigation="standalone"] body[data-services-product="moviesoft"] .studio {
    height: calc(100vh - var(--kd-demo-navigation-height));
  }
}

@media (max-width: 900px) {
  html[data-kd-demo-navigation="standalone"] body[data-services-product="moviesoft"] .studio {
    min-height: calc(100vh - var(--kd-demo-navigation-height));
  }
}

@media (min-width: 1001px) {
  html[data-kd-demo-navigation="standalone"] body[data-services-product="reserve"] .side {
    top: var(--kd-demo-navigation-height);
    height: calc(100vh - var(--kd-demo-navigation-height));
  }

  html[data-kd-demo-navigation="standalone"] body[data-services-product="worker"] .jobs-panel {
    top: calc(16px + var(--kd-demo-navigation-height));
  }

  html[data-kd-demo-navigation="standalone"] body[data-services-product="worker"] .job-list {
    max-height: calc(100vh - 330px - var(--kd-demo-navigation-height));
  }
}

@media (min-width: 1101px) {
  html[data-kd-demo-navigation="standalone"] body[data-services-product="construction"] .pv,
  html[data-kd-demo-navigation="standalone"] body[data-services-product="mobile-order"] .cats,
  html[data-kd-demo-navigation="standalone"] body[data-services-product="realestate"] .pd {
    top: calc(74px + var(--kd-demo-navigation-height));
  }

  html[data-kd-demo-navigation="standalone"] body[data-services-product="contract"] .det {
    top: calc(70px + var(--kd-demo-navigation-height));
  }

  html[data-kd-demo-navigation="standalone"] body[data-services-product="quote"] .pp {
    top: calc(72px + var(--kd-demo-navigation-height));
  }
}

@media (min-width: 1181px) {
  html[data-kd-demo-navigation="standalone"] body[data-services-product="stock"] .pj {
    top: calc(70px + var(--kd-demo-navigation-height));
  }
}

@media (min-width: 1241px) {
  html[data-kd-demo-navigation="standalone"] body[data-services-product="ec-admin"] .od {
    top: calc(72px + var(--kd-demo-navigation-height));
  }

  html[data-kd-demo-navigation="standalone"] body[data-services-product="reserve"] .detail {
    top: calc(70px + var(--kd-demo-navigation-height));
  }
}

html[data-kd-demo-navigation="standalone"] body[data-services-product="minutes"] .player {
  top: calc(66px + var(--kd-demo-navigation-height));
}

@media (max-width: 640px) {
  html[data-kd-demo-navigation="standalone"] body[data-services-product="minutes"] .player {
    top: calc(96px + var(--kd-demo-navigation-height));
  }
}